REACT) contextAPI 간략 요약

 

간략하게 todoApp을 만들어보며 사용한 contextApi 사용 후기입니다.

---

🌍contextAPI

여러 컴포넌트끼리 동일한 상태가 필요할 때 사용하면 용이

 

🌍React.createContext() 

context 객체를 반환, 해당객체로 Provider, Consumer가 사용 가능합니다.

provider: context의 value를 등록하는 역할

consumer: context를 구독하는 컴포넌트

 

🌍useContext(MyContext)

context 조회, context객체를 넘겨 context의 현재 값을 반환합니다.

context의 현재 값은 가장 근접한 <MyContext.Provider>의 value prop에 의해 결정됩니다.

 

useContext()를 호출한 컴포넌트는 context값이 변경될시 다시 reRender 됩니다.

 

---

userReducer와  contextApi를 혼합하여 사용하였습니다.

 

1. context를 하나 생성합니다.

export const myContext = React.createContext();

 

2. userReducer()로 value와 dispatch객체를 반환받습니다.

const {obj, dispatch} = useReducer(customReducer, []);

 

3. context의 provider에 reducer의 반환 값을 등록시킵니다.

<myContext.Provider value={obj, dispatch}>
  ...하위 컴포넌트
</myContext.Provider>

 

이과정까지 완료하면 다른 컴포넌트에서 provider에 등록시킨 값을 사용할 수 있습니다.

 

4. 하위 컴포넌트에서 context의 값을 사용합니다.

const {dispatch} = useContext(myContext);

 useContext 사용 시 해당 state를 구독하게 됩니다.