1. 전역 상태 관리애플리케이션 전체에서 공유되는 상태를 중앙에서 관리하고, 이를 필요로 하는 컴포넌트들이 손쉽게 접근하거나 업데이트 할 수 있도록 하는 방식이다. 전역 상태는 로컬 상태(컴포넌트 내부에서만 사용하는 상태)와 달리, 여러 컴포넌트가 동시에 접근하고 사용할 수 있는 데이터를 의미한다. 1-1. 전역 상태 관리가 필요한 이유1. 상태 공유여러 컴포넌트에서 동일한 데이터를 사용해야 할 때, 개별적으로 상태를 관리하면 데이터 동기화가 어려워질수도 있다. 이를 방지하기 위해 전역 상태 관리가 필요하다. 2. 복잡한 상태 흐름 관리상태를 부모-자식 간에 계속 전달해야하는 Props Drilling 문제를 해결한다. 전역 상태 관리 도구를 사용하면 상태를 중앙에서 관리해 데이를 필요한 곳에서 바로 사..

1. React Context APIReact에서 컴포넌트 트리를 통해 데이터를 전역적으로 공유하기 위해 사용하는 기능이다. 이를 통해 부모, 자식 관계의 중간 컴포넌트들을 거치지 않고 데이터를 직접 전달할 수 있다. Props-Drilling을 피할 수 있다. Context API는 상태 관리가 필요한 경우 Redux와 같은 외부 라이브러리를 대체할 수 있는 간단한 방법으로 사용이 된다. 2. 주요 개념2-1. Context 생성(React.createContext)Context는 React.createContext 메서드를 호출하여 생성된다.생성된 Context에는 Provider와 Consumer라는 두 가지 중요 컴포넌트가 포함되어 있다.const MyContext = React.createCon..

1. useOutletContext React Router에서 제공하는 훅으로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 공유하거나 기능을 전달하기 위해 사용한다. useOutletContext는 Outlet 컴포넌트의 context 속성을 통해 데이터를 전달 받는다.React Router를 사용한 페이지 내에서, 특정 라우트 계층 구조에서 데이터를 효율적으로 공유하고자 할 때 유용하다. 1-1. 기본 구조와 동작1. 부모 컴포넌트에서 context 설정부모 컴포넌트는 Outlet에 context 속성을 사용해 데이터를 전달한다.import { Outlet } from 'react-router-dom';function Parent() { const sharedData = { user: 'John Do..

1. React Router 의 개념Router에는 여러 종류가 있다. BrowserRouter : 브라우저의 history API를 사용, URL이 깔끔하게 유지HashRouter : URL에 #를 포함, 서버 설정이 필요 없지만 SEO에 불리함MemoryRouter : 메모리에서 라우팅 정보를 유지. 브라우저 히스토리를 사용하지 않는 환경(테스트용 등) 적합1-1. 라우트의 정의path 와 렌더링할 컴포넌트를 정의중첩 라우트를 부모 - 자식 관계 정리import { createBrowserRouter } from 'react-router-dom';const router = createBrowserRouter([ { path: '/', element: , children: [ ..

1. useMemouseMemo는 메모이제이션하여 불필요한 계산을 방지하는 React Hook이다. 즉, 특정 값이 변경되지 않으면 기존 계산 결과를 재사용하도록 하는 기능이라고 볼 수 있다.주요 목적은 무거운 계산이나, 렌더링 중 반복적으로 실행되는 연사을 최소화하여 성능을 향상시키는 것이다.import React, { useMemo } from 'react';const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);import로 useMemo를 가져온다. useMemo(() => {계산식}, [의존성])첫 번째 인자: 함수 -> 계산할 코드를 함수로 작성두 번째 인자: 의존성 배열 -> 배열 안의 값이 변경될 때만 첫..

1. useState단순한 상태 관리에 적합하다.상태를 업데이트하기 위해 새로운 상태값을 직접 설정상태의 형태가 단순(숫자, 문자열, boolean 등)하거나 관리 로직이 복잡하지 않은 경우 사용const [state, setState] = useState(initialValue); 장점간단한 상태를 관리할 수 있다.함수형 업데이트(setState(prev) => newValue)로 이전 상태를 기반으로 업데이트 가능import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>..