새로운 리액트 공식문서로 배우는 Context API 2편 : 리듀서와 컨텍스트로 애플리케이션 확장하기

원문 보기 : https://beta.reactjs.org/learn/scaling-up-with-reducer-and-context

Scaling Up with Reducer and Context

리듀서를 사용하면 컴포넌트의 상태 업데이트 논리를 통합할 수 있습니다. (+핸들러의 변경 필요 X)

컨텍스트를 사용하면 데이터를 컴포넌트 트리 깊숙히 전달할 수 있습니다.

리듀서와 컨텍스트를 결합하여 복잡한 화면의 상태를 관리할 수 있습니다.

해당 문서는 딱히 주목할만한 내용이 없네요.

오늘 배울 내용

• 리듀서를 컨텍스트와 결합하는 방법
• props를 통한 상태  및 디스패치 전달을 ​​피하는 방법
• 컨텍스트 및 상태 로직을 별도의 파일에 보관하는 방법

리듀서 함수는 모든 상태 업데이트 논리를 포함합니다.

리듀서는 이벤트 핸들러를 짧고 간결하게 유지하는 데 도움이 됩니다.

그러나 앱이 성장함에 따라 또 다른 어려움에 직면할 수 있습니다.

다른 컴포넌트가 상태를 읽거나 변경할 수 있도록 하려면

현재 상태와 이를 변경하는 이벤트 핸들러를 props로 명시적으로 전달해야 합니다.

중간에 수십 또는 수백 개의 컴포넌트가 있는 경우 모든 상태와 기능을 전달하는 것은 매우 실망스러울 수 있습니다!

---

다음은 리듀서를 컨텍스트와 결합하는 방법입니다.

• 컨텍스트를 만듭니다.
• 상태와 디스패치를 ​​컨텍스트에 넣습니다.
• 트리의 아무 곳에서나 컨텍스트를 사용합니다.

 

굳이 나눠서 설명하는 것보다 아래 코드를 한번 보는게 이해가 빠를 것 같네요.

Provider는 상태를 처리하는 방법을 알고 있는 UI의 일부로

useState는 상태를 읽는 방법으로

useDispatch는 트리의 하단 컴포넌트에서 업데이트하는 방법으로 생각할 수 있습니다.

---

요약

• 리듀서를 컨텍스트와 결합하여 하위 컴포넌트가 트리 위에 존재하는 상태를 읽고 업데이트하도록 할 수 있습니다.
• 아래 컴포넌트에 상태 및 디스패치 함수를 제공하려면 다음을 수행합니다.
  • 두 개의 컨텍스트를 만듭니다(상태 및 디스패치 함수용).
  • 감속기를 사용하는 컴포넌트에서 두 컨텍스트를 모두 제공합니다.
  • 컨텍스트를 컴포넌트에서 사용합니다.
• 하나의 파일로 이동하여 컴포넌트를 더 깔끔하게 정리할 수 있습니다.
  • 컨텍스트를 제공하는 TasksProvider와 같은 컴포넌트를 내보낼 수 있습니다.
  • useTasks 및 useTasksDispatch와 같은 사용자 정의 Hook을 내보내어 읽을 수도 있습니다.
• 앱에 이와 같은 컨텍스트-리듀서 쌍이 많이 있을 수 있습니다.

추가로 볼만한 글 : https://itchallenger.tistory.com/262?category=1063253 

리액트 디자인패턴 : Context Module Function (컨텍스트 모듈 함수 패턴)

https://kentcdodds.com/blog/how-to-use-react-context-effectively