[React] React Hooks - useContext

React Hooks - useContext

• useContext란
  • 상태를 공유하는 context (상태 변경 시 모두 다시 랜더링)
  • context는 App 안에서 전역적으로 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법 제공
  • 상위 컴포넌트의 data가 필요한 하위 컴포넌트들은 useContext 훅을 사용하여 데이터를 받아온다.
  • Provider로 부터 Consumer까지 value(state) 공유
  • Provider의 자식들은 해당 context의 상태를 바로 접근 가능
  • createContext → Context.Provider → Context.Consumer (useContext)
• import
  • import { createContext } from ‘react’;
  • import { useContext } from ‘react’;
• 사용
  • 순서
    1. createContext
       1. const MyContext = createContext<MyContextProp>();
    2. Provider
       1. export const MyProvider = ({ children }): PropsWithChildren) ⇒ { … };
    3. useContext
       1. const useMyContext = () ⇒ useContext(MyContext);
  • 예시 1

    • import { createContext } from 'react';
      export const MyContext
                     = createContext({x: 1});
      ----------------------------------------------
      import { MyContext } from '../myContext';
      …
      <MyContext.Consumer>
        { value => <h1>x: {value.x}</h1> }
      </MyContext.Consumer>

  • 예시 2

    • export const MyContext = createContext();
      render(
      	<MyContext.Provider value={{변수}}>
      		<App />
      	</MyContext.Provider>
      );
      ----------------------------------------------
      import { useContext } from ‘react’;
      const 변수 = useContext(MyContext);