context API 는 전역 상태 관리를 위한 기능이다.
컴포넌트가 props를 전달하지 않아도 부모의 컴포넌트로부터 props를 받을 수 있다.
❗ 값을 변경하면 해당 Context를 사용하는 모든 컴포넌트가 다시 렌더링 된다.
✅ 기본 사용법
const SomeContext = createContext(defaultValue);
const CurrentUserContext = createContext(defaultValue);
export default function App(){
const [data, setData] = useState(defaultValue);
const [currentUser, setCurrentUser] = useState(defaultValue);
return(
<SomeContext.Provider value={data}>
<CurrentUserContext.Provider
value={{
currentUser,
setCurrentUser
}}
>
<Button />
...
</CurrentUserContext.Provider>
</SomeContext.Provider>
)
}