22화: Scaling Up with Reducer and Context

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

참새. Unsplash 에 Namrata Shah 님이 올림

공식 문서

https://react.dev/learn/scaling-up-with-reducer-and-context

Scaling Up with Reducer and Context – React

Reducer와 context

• reducer: 컴포넌트의 상태 업데이트 로직을 합침
• context: 정보를 트리 아래 깊은 곳의 컴포넌트에게까지 전달 가능
• context 안에 상태와 dispatch 함수를 같이 넣어서 상태 관리 가능

Reducer와 context를 합치는 세 단계

1. context 만들기
   • context 두 개를 만듦: 상태값 읽기 전용, dispatch 함수 전용
2. 상태와 dispatch를 context 안에 넣기
   • 해당 context를 제공할 컴포넌트에서 useReducer를 이용해 상태와 dispatch를 만듦
   • 만든 것들을 각 context provider의 value로 넣어서 자식에게 제공
3. 원하는 곳에서 context 쓰기

하나의 파일로 정리하기

• createContext와 useReducer를 한 파일에 넣기
• children prop을 이용해 context를 제공해 주는 컴포넌트 만들어서 export
• 상태값과 dispatch 함수를 읽을 수 있는 훅도 만들어서 export
• 관심사 분리 대성공!!: 기존의 컴포넌트는 실제 구동 원리는 신경쓰지 않고 UI에만 집중할 수 있음