[React] 16. Context API를 통해 전역 값 사용하기

잘못 된 내용에 대한 지적은 언제든 환영입니다.

Context API

• 컴포넌트 상관없이 전역으로 원하는 값을 사용할 수 있도록 하는 리액트 내장 API이다.
• useReducer와 함께 사용하면 상태 관리 도구의 역할 또한 수행한다.
  (참고 : 다른 상태 관리 도구의 예시로는 Redux, MobX 등이 있다.)
• 이를 통해 목적지 컴포넌트에 값을 전달하기 위해 복잡하게 여러 컴포넌트를 거치는 문제를 방지할 수 있으며, 의존성 개선에 도움이 된다.

Context API 함수 정리

• createContext() : 컨텍스트를 생성한다.

   // 인자에는 기본 값이 들어간다.
   // 외부에서 조회해야 하므로 export 해준다.
   export const Context = createContext(null);

👉 createContext().Provider : 해당 컨텍스트를 통해 전역으로 사용할 값을 설정하고, 자식 컴포넌트에 전달하는 컴포넌트

    // 자식들은 모두 컨텍스트의 값을 사용할 수 있다.
    return (
      <Context.Provider value=true>
        {children}
      </Context.Provider>
    );

• useContext() : 컨텍스트를 조회하여 사용한다.

   const contextExample = useContext(Context);

Context API 사용하기

설명의 편의를 위한 용어 정리(실제 사용되는 용어 아님 주의)

생성 컴포넌트 : 컨텍스트가 생성 될 컴포넌트
조회 컴포넌트 : 컨텍스트가 조회 될 컴포넌트
생성 파일 : 1이 위치한 파일
조회 파일 : 2가 위치한 파일

• 생성 파일에 createContext를 import 해준다.

   import { createContext } from "react";

• 생성 컴포넌트에서 컨텍스트로 지정할 변수를 생성하여 createContext() 함수를 통해 컨텍스트로 만들어준다.

  • 인자로는 전역으로 사용할 값이 지정되지 않을 경우 사용 할 기본값을 준다.
  • 해당 변수를 외부에서 사용할 수 있도록 export 해준다.

        export const Name = createContext(null);

• 생성 컴포넌트에서 Provider 컴포넌트를 통해 전역으로 사용할 값을 지정하고, 렌더링 할 컴포넌트들을 감싸서 반환해준다.

  • value 값을 지정하지 않을 경우, 위에서 지정한 기본값이 넘겨진다.

        return <Name.Provider value="백괴">{children}</Name.Provider>;

• 조회 파일에 useContext와 컨텍스트 변수를 import 해준다.

   import { useContext } from "react";
   import { Name } from "./components/GetName";

• 조회 컴포넌트에 변수를 생성하여 useContext 함수를 넣어주고, import해준 context 변수를 파라미터로 넘겨준다.

   const myName = useContext(Name);

• 값을 잘 활용한다😊

   // 출력 : 제 이름은 백괴 입니다.
   console.log(`제 이름은 ${myName} 입니다.`);

useReducer를 활용한 상태 관리

• 전역값을 useReducer의 reducer 함수에 객체를 전달하는 dispatch 함수로 설정해 주면, 전역적으로 상태 관리가 가능하다.
  (useReducer에 대한 내용은 챕터 14 참고)

   const [state, dispatch] = useReducer(reducer, initialState);
   ...
   return (
     <UserDispatch.Provider value={dispatch}>
       <PassComponent />
     </UserDispatch.Provider>
   )

컨텍스트 조회용 커스텀 Hook

• 컨텍스트가 생성 된 파일 내에서 컨텍스트 조회용 커스텀 Hook을 만들어 export할 경우, 조회 시 필요한 코드 양을 줄일 수 있다.

   // 생성 컴포넌트

   // 컨텍스트가 존재하지 않을 경우 호출
   const notCtx = () => {
     throw new Error("Context를 찾을 수 없습니다.");
   };

   // 컨텍스트 조회용 커스텀 Hook
   export const useNameCtx = () => {
     return useConetxt(Name) || notCtx();
   };

   // 조회 컴포넌트
   import { useNameCtx } from "../context";
   ...
   const name = useNameCtx();

References
"20. useReducer 를 사용하여 상태 업데이트 로직 분리하기" .velopert
"React Hooks : useReducer() 함수" .xiubindev