Chapter 3. Managing State

#7 Reducer와 Context로 확장하기

학습 목차

1. reducer와 context를 결합하기
2. 하나의 파일로 합치기

1. reducer와 context를 결합하기

• 수십 수백 개의 컴포넌트를 거쳐 state나 함수를 전달하기는 쉽지 않다.
• Reducer와 context를 결합하는 방법은 아래와 같다.
  • Context를 생성한다.
  • State과 dispatch 함수를 context에 넣는다.
  • 트리 안에서 context를 사용한다.

Step 1. Context 생성하기
Step 2. State와 dispatch 함수를 context에 넣기
Step 3. 트리 안에서 context 사용하기

2. 하나의 파일로 합치기

• 반드시 이런 방식으로 작성하지 않아도 되지만, reducer와 context를 모두 하나의 파일에 작성하면 컴포넌트들을 조금 더 정리할 수 있다.

KeyPoint

• Custom Hook 안에서도 useContext 등 다른 Hook을 사용할 수 있다.

• 앱이 커질수록 context-reducer 조합이 더 많아질 것이다.
  앱을 확장하고 큰 노력 없이 트리 아래에서 데이터에 접근할 수 있도록 state를 끌어올리기 위한 강력한 방법이기 때문이다.

요약

• Reducer와 context를 결합해서 컴포넌트가 상위 state를 읽고 수정할 수 있도록 할 수 있다.
• State와 dispatch 함수를 자식 컴포넌트들에 제공하는 방법
  1. 두 개의 Context를 만든다.
     (각각 state와 dispatch 함수를 위한 것)
  2. Reducer를 사용하는 컴포넌트에서 두 context를 제공한다.
  3. 하위 컴포넌트들에서 필요한 context를 사용한다.
• 더 나아가 하나의 파일로 합쳐서 컴포넌트들을 정리할 수 있다.
  • Context를 제공하는 TasksProvider 같은 컴포넌트를 내보낼 수 있다.
  • 바로 사용할 수 있도록 useTasks와 useTasksDispatch 같은 사용자 Hook을 내보낼 수 있다.
• context-reducer 조합을 앱에 여러 개 만들 수 있다.

  ---

React 공식 문서

https://react.dev/

React 비공식 번역 문서

https://react-ko.dev/

MDN

https://developer.mozilla.org/ko/

Wikipedia

https://ko.wikipedia.org/wiki/