useReducer Hook

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다.
2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다.
3. 다른사람의 관점을 고려해야한다.

---

 

학습목적

React의 hook은 각목적에 맞게 쓰이고 자주 사용되는 hook들이 있다 useState는 상태변경, useEffect는 side Effect 등 말이다. 그중 useReducer은 명칭은 익숙하지만 사용해본적이 없다. Redux에서도 reducer함수에 따라 상태를 업데이트 하는데, Redux와 관계가 있는건가? 하는 궁금증으로 학습을하게 되었다.

---

useReducer란?

여러 상태 업데이트가 많은 구성요소는 상태관리를 하기가 힘들수도 있다. 이런 복잡한 구성 요소의 상태를 하나의 함수로 관리하여, 단일 컴포넌트 내의 복잡한 상태들을 구조화하여 유지하고 쉽게 유지보수 할수 있도록 해주는 hook이다.

react.dev

---

useReducer의 구성요소

• const [state, dispatch] = useReducer(reducer, initalArg, init)
  • reducer: 상태가 업데이트되는 방법을 지정하는 함수
  • initalArg: 초기 상태값
  • init: 초기값을 지정하지 않고 초기 상태를 반환해야하는 초기화 함수(복잡한,지연 or 비동기 or 캐싱)
• reducer: 상태를 업데이트하는 주요 함수로서, 현재 상태와 액션객체를 받아서 새로운 상태를 반환하는 역할을 한다.
• action: dispatch함수를 통해 reducer에게 전달되는 객체로 상태를 변경하는데 필요한 정보를 담고 있다.
• dispatch: reducer함수에 action,payload를 전달하여 상태를 업데이트하는 역할을 한다.

useReducer – React

---

useReducer 사용방식

https://stackblitz.com/edit/stackblitz-starters-1xt3yp?file=src%2FListStudent.tsx

---

useReducer 주의사항

- 최상위 레벨 호출: useEffect 를 호출하려면 구성요소의 최상위 수준에서 호출해야한다.

- 렌더링: dispatch함수는 다음 렌더링 에 대한 상태 변수만 업데이트 한다.

- 동일한값: state에 제공한 새로운값과 state의 현재값이 동일 하다면 렌더링을 건너뛴다.

- 상태일관처리: 모든 이벤트핸들러에 대해서는 단일 이벤트로 처리되어 여러번 렌더링 되는것을 방지한다

- 순수함수: reducer함수는 순수함수 여야한다.

- 미들웨어: 미들웨어가 존재하지 않는다.

- useState와의 연관성: useState와 비슷한 동작으로 "다음렌더링에 대한 상태변수 업데이트", "값이 동일하면 렌더링을 하지않음". "이벤트의 일괄처리"

- 상태는 읽기전용: 상태를 action객체가 아닌 직접적으로 수정하지 말아야 한다. (불변성)

- 초기 상태이후의 렌더링: 초기 상태를 한번저장하고 다음 렌더링에는 이를 무시한다.

---

useReducer에 대한 개인적인 의견

 

확실히 로컬상태 관리중 복잡한 상태관리를 할때는 많은 useState를 쓰는것보다는 눈에 들어와 보기는 좋다. 하지만 프로젝트를 할때 하나의 컴포넌트에서 복잡한 상태관리를 가지고 있는 컴포넌트가 얼마나될까? 상황에 따라 다르지만 useState가 좀더 직관적일수도 있다고 생각이 든다. 그리고 전역상태관리와 같이 사용한다면 이것또한 복잡성을 더 증가시키는게 아닐까? 여러 의문이 있는 와중에 매주 일요일에 진행하는 스터디 그룹의 현직 개발자분 에게도 조언을 들었다. ContextAPI와 useReducer를 사용하여 조금더 나은 상태관리를 하는 경우도 있다고 하신다. 이부분은 테스트를 더 진행해보자고 한다. 하지만 다른 전역상태 관리 라이브러리와 쓰이는것은 오히려 복잡성을 높이는 것같다.

---

useReducer 참고문서

[useReducer]

useReducer – React

[useReducer의 reducer]

Extracting State Logic into a Reducer – React