현고미 노트(H-gomi's Note)

React Hook이란? - 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. https://ko.legacy.reactjs.org/docs/hooks-intro.html useEffect 란? - Class Comonent의 Life Cycle을 사용하게 해줌 * Life Cycle은 크게 3단계로 구성 (Mounting -> Upda..

안녕하세요, 여러분! 오늘은 JavaScript의 ES6 문법 중 하나인 '구조 분해 할당(Destructuring)'에 대해 이야기해보려고 합니다. 이 기능은 코드를 더 간결하고 가독성 높게 작성할 수 있도록 도와줍니다. 1) 구조 분해 할당이란? 구조 분해 할당은 배열이나 객체에서 원하는 값을 추출하여 변수에 할당하는 방법입니다. 이를 통해 변수를 일일이 하나씩 할당하는 번거로움을 줄일 수 있습니다. 2) 배열에서의 구조 분해 할당 배열에서의 구조 분해 할당은 다음과 같이 작성할 수 있습니다. const colors = ['빨강', '파랑', '노랑']; const [firstColor, secondColor] = colors; //생략된 변수는 값을 할당하지 않습니다. console.log(firs..

안녕하세요. 현고미입니다 오늘은 React의 Props와 State에 대해 알아보려고 합니다. 이 두 가지 개념은 React 애플리케이션을 구축하고 관리하는 데 아주 중요한 역할을 합니다. 자, 함께 살펴볼까요? Props와 State 란? Props(속성)와 State(상태)는 React 컴포넌트가 데이터를 전달하고 관리하는 방법을 의미합니다. 이 둘은 각자 다른 역할을 하지만, 모두 컴포넌트 간의 데이터 흐름을 원활하게 만들어줍니다. 1) Props: 정보 전달의 편리함 Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. 이 데이터는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없습니다. 이런 특징 덕분에 데이터 흐름을 예측 가능하게 만들어줍니다. Props를 사용하면 컴포..

해당 게시글은 Chat-GPT3.5를 사용하여 작성한 내용입니다. 이번 블로그 글에서는 React 애플리케이션에서 상태(State)를 관리하고 업데이트하는 방법에 대해 다뤄보겠습니다. React의 상태 관리는 애플리케이션의 동적인 변화를 다루는 핵심 부분입니다. 함께 상태 관리와 업데이트 전략을 살펴보겠습니다. 1. State 소개 React 컴포넌트 내부에서 사용하는 State는 컴포넌트의 상태를 나타내는 데이터입니다. State는 주로 컴포넌트의 동적인 데이터를 저장하고 관리하는 데 사용됩니다. 예를 들어, 사용자 입력값이나 컴포넌트의 가시성 상태 등이 여기에 해당합니다. 2. State의 초기화와 사용 컴포넌트 내에서 State를 사용하려면 `useState` 훅을 사용합니다. 아래는 State를 ..

안녕하세요. 오늘은 Filter함수에 대한 내용을 정리하보려고 합니다. filter method는 JavaScript에서 배열의 원소들을 조건에 따라 걸러내는 메서드입니다. filter method는 콜백 함수를 파라미터로 받습니다. 콜백 함수는 배열의 각 원소에 대해 실행되며, true를 반환하면 해당 원소를 새로운 배열에 넣고, false를 반환하면 건너뜁니다. filter method는 원본 배열을 변경하지 않고, 새로운 배열을 반환합니다. react에서는 filter method를 사용하여 컴포넌트의 상태나 props로 전달받은 배열을 필터링할 수 있습니다. 예를 들어, 할 일 목록을 보여주는 컴포넌트가 있다고 가정해 봅시다. 이 컴포넌트는 상태로 todos라는 배열을 가지고 있습니다. todos..

안녕하세요 현고미 입니다! 이번에는 React의 map을 사용한 list의 반복에서 key를 사용해야하는 이유에 대해 알아보겠습니다. React에서는 배열을 엘리먼트 리스트로 변환할 때 map 함수를 자주 사용합니다. 예를 들어, 다음과 같이 numbers 배열을 엘리먼트로 만들 수 있습니다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => { number }); 그러나 이 코드를 실행하면 콘솔에 다음과 같은 경고가 표시됩니다. Warning: Each child in a list should have a unique "key" prop. 이 경고는 리스트의 각 항목에 key라는 특수한 속성을 넣어야 한다는 것을 의미합..

안녕하세요 현고미 입니다! 이번에는 React에서 CSS를 적용하는 방법에 대해 알아보겠습니다. React는 컴포넌트 기반의 라이브러리로, 각 컴포넌트마다 독립적인 스타일을 적용할 수 있습니다. CSS를 적용하는 방법은 크게 세 가지가 있습니다. 1) CSS파일을 생성해서 적용하는 방법 첫 번째는 일반적인 방법인 CSS 파일을 만들고, import 문으로 컴포넌트에 불러오는 방법입니다. 예를 들어, App.js라는 컴포넌트에 App.css라는 스타일 파일을 적용하고 싶다면, 다음과 같이 작성할 수 있습니다. [App.js] import React from 'react'; import './App.css'; function App() { return ( React에서 Css 적용하기 ); } export ..

안녕하세요^^ 이번에는 JSX에 대해 알아보겠습니다. ⚛︎ JSX란? JSX는 JavaScript XML의 줄임말로, 자바스크립트에 HTML과 비슷한 문법을 추가한 확장 문법입니다. JSX는 React에서 UI를 만들 때 사용되는데, HTML처럼 태그와 속성을 사용하여 컴포넌트를 작성할 수 있습니다. 예를 들어, 다음과 같은 JSX 코드는 Hello, world! 브라우저에서 실행되기 전에 바벨이라는 도구를 통해 다음과 같은 자바스크립트 코드로 변환됩니다. React.createElement("h1", null, "Hello, world!"); ⚛︎ JSX의 장점 보기 쉽고 익숙하다. JSX는 HTML과 비슷하기 때문에 일반 자바스크립트보다 더 가독성이 좋고 작성하기 쉽습니다. 높은 활용도를 가진다. J..

⚛︎ SPA(Single Page Application) 개념 직독 하자면 "하나의 페이지로 구성된 어플리케이션" 이다. 그래서 그게 무슨 말인지 알아보려면 SPA와 반대되는 개념인 MPA(Multi Page Application)을 알아야한다. ⚛︎ MPA(Multi Page Application) 개념 MPA는 여러개의 HTML 페이지를 사용하는 전통적인 웹 어플리케이션이다. MPA의 각 페이지는 로드과정에서 전체 페이지를 서버에 요청하여 로드한다. 그 과정에서 로딩시간이 길어지고 데이터가 많아질 수록 느려지는 단점이 있다. 이런 부분을 보완하는 방식이 SPA이다. ⚛︎ 그래서 SPA(Single Page Application)가 뭔데? 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지를 동적으..