멀리 떨어진 자식에 공통 설정을 전달합니다.
Context는 theme, locale, 인증 정보처럼 넓은 범위에서 읽는 값을 중간 props 없이 제공합니다. Provider 값이 바뀌면 소비자가 재렌더됩니다.
모든 상태를 하나의 Context에 넣지 말고 변경 빈도와 소비 범위로 나눕니다.
Provider 값으로 매 렌더 새 객체를 만들 때 소비 범위를 점검합니다.
의미 있는 Provider 없이 기본값만 사용하면 설정 누락이 조용히 숨을 수 있습니다.
로컬 프로젝트에서 확인해보세요언어 Context를 추가해 버튼 문구를 바꾸세요.
import { createContext, useContext, useState } from "react";
const ThemeContext = createContext("light");
function Panel() {
const theme = useContext(ThemeContext);
return <p>현재 테마: {theme}</p>;
}
export default function App() {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={theme}>
<main>
<button onClick={() => setTheme((v) => (v === "light" ? "dark" : "light"))}>
전환
</button>
<Panel />
</main>
</ThemeContext.Provider>
);
}