📚 Reference

• 공식 문서 1

📜 Chapter

Context

Redux

Zustand

useContext

• useContext
• React의 Hook 중 하나로, 컴포넌트 트리 깊숙이 있는 자식 컴포넌트가 부모 컴포넌트로부터 props를 일일이 전달받지 않고도 전역적인 상태(state)를 쉽게 공유할 수 있도록 해주는 도구이다.
• 이는 prop drilling이라는 비효율적인 상황을 해결하는 데 유용하다.

작동 원리

• useContext를 사용하려면 먼저 React.createContext를 사용하여 Context 객체를 생성해야 한다.
• 이 Context 객체는 공유하고자 하는 데이터의 "공급자(Provider)"와 "소비자(Consumer)" 역할을 담당한다.

1. Context 생성: createContext를 호출하여 Context 객체를 만든다.

const MyContext = React.createContext(defaultValue);

2. Provider 설정: 데이터가 필요한 컴포넌트들을 MyContext.Provider로 감싸고, value prop에 공유할 데이터를 전달한다.

<MyContext.Provider value={data}>
  <ComponentA />
</MyContext.Provider>