[React] Context란?

두 컴포넌트의 상태값을 공유해야 한다면?

state를 가장 근접한 부모 컴포넌트로 올리고 props로 전달

 

만약 모든 컴포넌트에서 상태 값을 공유받아야 하는 경우라면 props drilling이 발생하여 비효율적

이럴 때에 Context API를 활용!

(e.g. 언어, 테마, 로그인 여부 확인)

 

상태가 변경 될 때마다 모든 컴포넌트에서 리렌더링이 일어나므로 빈번히 업데이트 되는 상태는 활용하지 않는 것이 낫다.

 

데이터가 어디까지 공유되어야하는지를 판단해서 제대로 된 범위 내의 근접한 컴포넌트에 적용해주는 것이 좋다.

 

• useContext 사용 예시

import { createContext, useState } from 'react';

export const DarkModeContext = createContext();

export function DarkModeProvider({ children }) {
  const [darkMode, setDarkmode] = useState(false);
  const toggleDarkMode = () => setDarkmode((prev) => !prev);
  return (
  //children 요소에 전달해주고자 하는 값을 value로 넘겨주기
    <DarkModeContext.Provider value={{darkMode, toggleDarkMode}}>
      {children}
    </DarkModeContext.Provider>
  )
}