구조 분해 할당구조 분해 할당(Destructuring Assignment): JavaScript의 문법으로, 배열이나 객체의 값을 쉽게 추출하여 할당하는 방법이다. const fruits = ['apple', 'banana', 'cherry'];const [first, second, third] = fruits;console.log(first); // 'apple'console.log(second); // 'banana'console.log(third); // 'cherry' `const[]`는 배열에 대해 구조 분해 할당을 할 때 사용하는 문법이다. Hook은 왜 도입되었는가?함수형 컴포넌트에서도 상태 관리를 하기 위함사이드 이펙트 (부수효과) 처리를 쉽게 하기 위함클래스형 컴포넌트에서는 상태 관련 ..

BrowserRouterURL 관리하고 라우트를 설정한다. 해당 경로에 맞는 컴포넌트를 렌더링한다.경로 변경 시, 전체 페이지를 새로 고침 하지 않아도 다른 컴포넌트를 렌더링 할 수 있다.Navigation사용자에게 네비게이션 메뉴를 제공한다. 헤더나 사이드바에 위치한다.링크, 버튼 등을 포함한다.Routes여러 개의 `Route` 컴포넌트를 그룹화하여 라우팅 설정을 정의한다.Route`path`와 그 경로에 대응하는 컴포넌트 (element)를 설정한다.사용자가 특정 경로로 이동할 때 해당 컴포넌트를 렌더링한다.// App.jsimport React from 'react';import { Route } from 'react-router-dom';import HomePage from './pages/ho..

Hooksstate를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드를 실행되도록 할 수 없는 함수 컴포넌트에 그러한 기능을 지원하기 위해 나온 것리액트의 State와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것훅을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있다.1. 훅의 이름은 모두 `use`로 시작한다. 각 기능을 사용하겠다 의미이다.2. 개발자가 커스텀 훅을 만들어서 사용할 수 있다. (이름 앞에 use를 붙이는 건 필수)useState가장 대표적으로 많이 사용되는 훅함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않으므로 클래스 컴포넌트처럼 state를 사용하고 싶다면 `useState()` 훅을 사용해야 함c..

State리액트 컴포넌트의 상태를 의미함, 즉 리액트 컴포넌트의 변경 가능한 데이터state는 자바스크립트 객체임state는 사전에 미리 정해진 것이 아니므로 컴포넌트를 개발하는 개발자가 직접 정의해서 사용함렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함왜냐하면 state가 변경될 경우 컴포넌트가 다시 렌더링 되기 때문에 렌더링과 데이터 흐름에 관련 없는 값을 포함하면, 컴포넌트가 다시 렌더링 되어 성능을 저하 시킬 수 있기 때문import React, { useState } from 'react';const WrongExample = () => { const [name, setName] = useState('나마니'); const [count, setCount] = useState..

리액트 컴포넌트리액트 컴포넌트에서의 입력은 `props`, 출력은 리액트 엘리먼트.역할: `어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해주는 것컴포넌트의 이름은 항상 대문자로 시작해야 한다. Props리액트 컴포넌트의 속성컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 Props를 사용하지 않는다면?데이터 흐름의 혼란props는 부모 컴포넌트 -> 자식 컴포넌트로 데이터를 전달하는 기본적인 방식이므로, props를 사용하지 않으면 데이터가 어디서 오는지, 어디로 가는지 명확하지 않기 때문에 코드의 가독성이 떨어지고 유지보수가 어려워짐 Props를 사용하지 않은 경우import React, { useState } from 'react';const ParentCom..