[React Hooks] useReducer

 이번 글은 'Reack Hooks in Action'의 'Chapter 3. Managing component state with the useReducer Hook'의 내용을 요약 정리한 것입니다.

---

들어가며

• useReducer를 호출하여 여러 연관된 값을 관리하기 위해 React에 요청한다.
• 컴포넌트 상태 관리 로직을 한 곳에 담는다.
• reducer에 액션을 dispatching함으로써 상태를 갱신하고 리렌더링을 일으킨다.
• 초기 인자와 초기 함수를 통해 초기 상태를 설정한다.

---

useReducer의 기본 개념

• reducer는 상태에 대한 분명한 액션으로써 집중되고 명확히 정의된 방식으로 상태 변화를 관리하는 데 도움을 준다.
• reducer는 이전 상태에서 새로운 상태를 만들어내는 데 액션을 사용한다. 상호 관련된 여러 상태를 포함할 수 있는 더 복잡한 업데이트를 보다 쉽게 지정할 수 있다.
• React는 컴포넌트가 초기 상태를 지정하게 하고, 현재 상태에 접속하며, 상태를 갱신하고 리렌더링을 일으키는 useReducer Hook을 제공한다.
• 잘 정의된 액션을 dispatch하는 것은 상태 변화를 추적하는 것 및 컴포넌트가 다른 이벤트에 대한 응답에서 상태와 어떻게 상호 작용하는지 이해하는 것을 쉽게 만들어준다.

---

useReducer의 기본 동작 원리

 

 reducer는 위 그림처럼 상태 및 액션 값을 받아서 이를 바탕으로 한 새로운 값을 만들어낸다.

 

 

 useReducer Hook을 호출할 때 reducer와 초기값을 전달한다. Hook은 배열 내 두 가지 요소로서 현재 상태 및 dispathing 액션을 위한 함수를 반환한다.

 React는 처음 호출될 때에만 전달된 인자(reducer 및 초기 상태)를 인식한다. 뒤따르는 호출에서는 인자를 무시하지만 현재 상태와 reducer를 위한 dispatch 함수는 여전히 반환한다.

 

함수로써 초기값 생성하기

 

 초기 설정 함수는 초기 설정 인자를 초기 상태 생성을 위해 사용한다. 첫 번째 호출에서 상태는 초기 설정 함수의 반환값이다. 이어지는 호출에서는 호출이 일어날 때의 상태이다. 

 

 

 useReducer에 대한 특정한 호출에서 React는 항상 같은 dispatch 함수만을 반환한다. 함수가 변하지 않는 것은 대단히 중요한데 리렌더링은 props의 변경 혹은 의존성에 따르는 면이 많기 때문이다.

 

useReducer 작동 단계

---

요약

• reducer는 현재 상태 및 액션을 전달하여 새로운 값을 생성하는 함수이다. 상호 연관되는 값이 많을 경우 써봄직하다.

 

• useReducer Hook에는 reducer와 초기 상태를 전달한다. useReducer는 상태와 dispatch 함수 두 요소를 갖는 배열을 반환한다.

 

• useReducer Hook이 처음 호출될 때 초기 설정 인자 및 초기 설정 함수가 초기값을 생성하기 위해 호출된다. Hook은 자동적으로 초기 설정 인자를 초기 설정 함수에 전달한다. 초기 설정 함수는 reducer를 위한 초기 상태를 반환한다. 초기 설정 작업이 복잡하거나 초기 상태를 존재하는 함수를 활용하여 생성하고 싶을 때 쓴다.

 

• 액션을 전달하기 위해 dispatch 함수를 쓴다. React는 현재 상태 및 액션을 reducer에 전달함으로써 현재 상태를 새로운 상태로 변환한다. 상태가 변경될 경우 리렌더링이 일어난다.

 

• React는 컴포넌트 내 useReducer에 대한 특정한 호출을 위해 항상 같은 dispatch 함수를 반환한다. 만약 dispatch 함수가 호출 간에 변한다면, props로 전달되거나 Hooks의 의존성에 포함되었을 경우 불필요한 리렌더링을 야기한다.
• reducer 내에 if문 혹은 switch문을 사용하여 dispatch 함수로써 전달되는 액션을 확인한다.