React 전역 상태 관리 - #Context

React에서 App > A > B > C > D 순서로 컴포넌트 자식이 형성되어있다 생각했을 때, App 컴포넌트에서 props를 받아 D 컴포넌트에서 사용을 해야할 경우 사이에 있는 A, B, C 컴포넌트는 전달자로서의 역할만 하게 된다.
*props가 계속 전달되는 구조를 props dealing이라 한다.

App 컴포넌트에서 바로 D 컴포넌트로 데이터 전달을 할 수 있게 React에서는 Context API를 활용한다.

App 컴포넌트에서 Context를 생성하면 App 컴포넌트의 하위 컴포넌트들에게 App 컴포넌트 접근 권한이 주어진다.

Context API

보통 Context는 store 폴더를 만든 후 파일 생성하여 사용한다.

사용 법

Context file

1. 새로운 파일을 생성하여 import createContext
*createContext : Context를 생성하게 해주는 함수

   import React, {createContext} from "react";

2. export createContext() 함수 호출

   • defaultValue 매개변수는 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값

     export const UserContext = createContext(/* defaultValue */);

3. 컴포넌트 생성 후 태그명이 export 했던 변수명 + .Provider return

   • UserContext.Provider : 자식 컴포넌트에게 정보를 보내준다는 설정
   • value={user} : value 속성을 사용하여 값 전달, value 값이 변할 때 마다 하위 컴포넌트들 리렌더링
   • {props.children} : 자식 컴포넌트에게 접근 가능하게 한다는 설정

     export default function UserStore(props) {
     	const user = 'FE-developer';
     	return (
     		<UserContext.Provider value={user}>{ props.children }</UserContext.Provider>
     	);
     }

Parent Component

1. 부모 컴포넌트에서 Context file 3번 에 만들어 놓은 UserStore 컴포넌트 import

   import UserStore from './store/user';

2. Context 접근 권한을 주려는 컴포넌트를 import한 컴포넌트 태그로 감쌈
   value 값이 변할 때 마다 모든 하위 컴포넌트는 리렌더링됨

   export default function App() {
    return (
      <UserStore>
        <ChildrenCompnt1 />
        <ChildrenCompnt2 />
      </UserStore>
    );
   }

Children Component

1. 자식 컴포넌트에서 import useContext

import React, { useContext } from 'react';

2. Context file 2번에 export한 UserContext import

   import { UserContext } from './store/user';

3. useContext()의 초기값으로 UserContext를 넣어 데이터 값을 가져옴

   export default function ChildrenCompnt1() {
    const value = useContext(UserContext);
    console.log(value);	// 'FE-developer'
    
    return (
      <div>Children Component 01</div>
    );
   }