useContext

yeonnnn·2025년 4월 9일

React

목록 보기
3/12
post-thumbnail

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>
  )
}
profile
차근차근, 한 걸음씩

0개의 댓글