[React] ContextAPI & useContext Hook을 통한 Global State 값 관리하기

✨ Context API란?

• 전역 상태(global state) 값을 공유할 수 있도록 React에서 고안된 방법
• 주로 로그인한 유저 정보, 테마, 언어 등을 저장한다.
• Prop Drilling을 개선할 수 있다.

Prop Drilling

Prop Drilling은 컴포넌트 트리에서
컴포넌트에 직접적으로 필요한 데이터를 props로 전달받는 것이 아니라,
단순히 컴포넌트 트리의 하위 컴포넌트로의 props 전달을 위하여 데이터를 전달하는 과정이다.

 

✨ Context API 사용법

Context의 사용법은 다음과 같다.

React.createContext(defaultValue)

• Context 객체를 생성한다.
• createContext 함수를 호출하면 Provider와 Consumer 컴포넌트를 반환한다.
• 파라미터로 넘겨받는 값은 Provider를 사용하지 않았을 때 적용될 초기값이다.

Context.Provider

• context의 value를 변경하는 역할을 한다.
• Provider 선언시 value props를 통해 context의 value를 입력받는다.
• 이때 value는 context를 통해 전역적으로 공유되는 값이다.

useContext Hook

• context의 value를 가져올 때 사용한다.
• 파라미터로 넘겨받는 값은 createContex를 통해 생성된 Context 객체이다.

 

✨ 간단한 예제로 살펴보는 Context

아래의 코드는 ContextAPI를 사용하여 전역 Language 값과 언어 설정을 변경하는 간단한 예제이다.

전체 코드 보기

// Context 생성
const I18nContext = createContext(null);

function App() {
  const [locale, setLocale] = useState('en');
  const changeLocale = useCallback(
    (locale) => {
      setLocale(locale);
    },
    [setLocale]
  );

  // 현재 언어 정보와 언어를 변경하는 함수를 Context의 Provider에 세팅
  // 해당 값은 모든 하위 트리에서 읽을 수 있음
  return (
    <I18nContext.Provider value={{ locale, changeLocale }}>
      <LanguageButton />
    </I18nContext.Provider>
  );
}

const LanguageButton = () => {
  // useContext를 사용하여 I18nContext의 값을 가져옴
  const { locale, changeLocale } = useContext(I18nContext);

  // 콘솔에 현재 언어 출력
  useEffect(() => {
    console.log('현재 언어:', locale);
  }, [locale]);

  const nextLanguage = useMemo(() => (locale === 'en' ? 'ko' : 'en'), [locale]);

  // 버튼 클릭시 언어 변경
  return (
    <button onClick={() => changeLocale(nextLanguage)}>{nextLanguage}</button>
  );
};

 

결과

처음 페이지 로드 시

버튼 클릭 시

 

 

✨ 공식문서

Context – React

Hooks API Reference – React