<aside> 💡

아래 내용은

https://github.com/To-Letter/To-Letter-front 레포지토리

useContext - 커밋 번호 a15156138a7871b3e7bc616b2153e8f30f05e7d3

를 예시로 작성

</aside>

useContext

react에서 컨텍스트(Context) 를 사용하여 컴포넌트 간에 전역적으로 값을 전달할 때 사용하는 Hook

컴포넌트 트리에서 부모- 자식 간의 깊이 있는 prop 전달을 생략하고 상태나 데이터를 쉽게 공유할 수 있도록 함

useContext 동작 구조

1. Context 생성 컨텍스트를 사용하기 위해 React.createContext()를 호출하여 컨텍스트 객체를 생성

   이 컨텍스트 객체는 데이터를 제공하고 소비하는 컴포넌트 사이에서 데이터를 공유하는 데 사용

   컨텍스트 객체는 메모리에 저장되며 react 컴포넌트 트리가 이 값을 참조 가능

   기본적으로 두 가지 중요한 속성을 포함

   1. Provider: 값을 제공하는 역할, 메모리 상에서 컨텍스트 값을 저장하는 역할
   2. Consumer: 값을 소비하는 역할, useContext를 통해 컨텍스트에서 데이터를 가져오기 가능

   interface MenuContextProps {
     menuNumber: number;
     setMenuNumber: React.Dispatch<React.SetStateAction<number>>;
   };
   
   export const MenuContext = createContext<MenuContextProps | undefined>(
     undefined
   );
   

2. Provider로 값 제공 생성된 컨텍스트 객체에는 Provider 컴포넌트가 포함되어 있음

   이 Provider는 react 컴포넌트 트리의 상위에 위치하며, 컨텍스트의 값 설정 및 해당 값을 자식 컴포넌트들에 제공하는 역할

   Provider는 value라는 속성을 통해 전달할 데이터를 설정, 이 값은 react 메모리 상에 할당됨

   export const MenuProvider: React.FC<{ children: ReactNode }> = ({
     children,
   }) => {
     const [menuNumber, setMenuNumber] = useState<number>(1);
   
     return (
       <MenuContext.Provider value={{ menuNumber, setMenuNumber }}>
         {children}
       </MenuContext.Provider>
     );
   };
   

3. useContext(Consumer 역할**)로 값 소비** 하위 컴포넌트에서 useContext(MyContext)를 호출하면 React는 컴포넌트 트리 상에서 가장 가까운 Provider를 찾아 해당 Provider의 value를 가져온다

   이 값은 React의 상태 관리 메커니즘을 통해 메모리 상에 저장되어 있기 때문에 리렌더링을 통해 상태가 업데이트될 때마다 최신 값을 참조

   const { menuNumber, setMenuNumber } = useContext(MenuContext)!;
   // menuNumber: 현재 메뉴 번호
   // setMenuNumber: 메뉴 번호 변경
   

4. Context 변경 시 자동 리렌더링 Provider의 value 값( menuNumber, setMenuNumber)이 변경되면, 이를 사용하는 모든 자식 컴포넌트는 자동으로 리렌더 됨, 이는 React의 상태 관리와 유사하게 작동

   컨텍스트를 사용하는 컴포넌트는 value가 변할 때마다 최신 값을 받게 됨.

useContext 리랜더링

**useContext**는 React에서 전역 상태를 관리하는 간단한 방법

**useContext**를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하지 않고도 상태를 공유할 수 있다. 하지만, context 값이 변경되면 이를 구독하는 모든 컴포넌트가 리렌더링되는 구조.

리렌더링 과정:

• Context 값 변경: 만약 context에 저장된 상태가 업데이트되면, 그 context를 구독하고 있는 모든 컴포넌트가 다시 렌더링됩니다.
• 리액트의 비교 알고리즘 (React Fiber): React는 DOM 변경을 최소화하기 위해 변경된 부분만 업데이트. 하지만 **useContext**는 구조상 context를 구독하는 모든 하위 컴포넌트가 새 값에 대해 리렌더링을 시작.

이로 인해 구독한 모든 컴포넌트가 필요하지 않은 경우에도 다시 렌더링될 수 있으며, 리렌더링 범위를 세밀하게 제어하기 어려움. 즉, 리렌더링을 최적화하고 싶다면 **useMemo**나 **React.memo**와 같은 도구를 추가적으로 사용해야 함.

성능 문제:

상태 업데이트가 자주 발생하거나 구독 컴포넌트가 많을 경우 성능 이슈가 발생할 수 있습니다. 모든 구독 컴포넌트가 불필요하게 다시 렌더링되기 때문입니다.