(이어서)

State 로직을 reducer로 추출하기

• 여러 state 업데이트가 여러 이벤트 핸들러에 분산되 있으면 컴포넌트는 과부하에 걸릴 수 있다.
  • 이를 reducer라는 단일 함수를 통해 컴포넌트 외부의 모든 state 업데이트 로직을 통합 가능하다

useState에서 useReducer로 마이그레이션하는 절차

1. state를 설정하는 것에서 action들을 전달하는 것으로 변경
   • state를 설정해서 무엇을 할 지를 지시하는 게 아닌 어떤 action을 전달
   • 예시
2. reducer 함수 작성
   • 현재 state와 action객체를 순서대로 받는 reducer 함수 / 반환은 다음 state를 반환한다
   • 이벤트 핸들러 ⇒ reducer 함수로 옮기기
     1. 현재의 state(tasks)를 첫 번째 매개변수로 선언
     2. action 객체를 두 번째 매개변수로 선언
     3. 다음 state를 reducer 함수에서 반환하도록 구조 작성
   • 이럴 경우 state를 매개변수로 전달 받기 때문에 reducer 함수를 컴포넌트 밖에 선언할 수 있다.
   • 예시
3. 컴포넌트에서 reducer 사용
   • 예시
   • 예시2

• Note
• Note2
• 왜 reducer라 부르는가

reducer를 사용해 관심사(업데이트 관련)를 분리 ⇒ 컴포넌트 로직을 더 쉽게 읽을 수 있음

useState vs useReducer

• 코드 크기 일반적으로 useState를 사용하면 미리 작성해야 하는 코드가 줄어듭니다. useReducer를 사용하면 reducer 함수 와 action을 전달하는 부분 모두 작성해야 합니다. 하지만 많은 이벤트 핸들러가 비슷한 방식으로 state를 업데이트하는 경우 useReducer를 사용하면 코드를 줄이는 데 도움이 될 수 있습니다.
• 가독성 useState로 간단한 state를 업데이트 하는 경우 가독성이 좋습니다. 그렇지만 state의 구조가 더욱 복잡해지면, 컴포넌트의 코드의 양이 부풀어 오르고 한눈에 읽기 어려워질 수 있습니다. 이 경우 useReducer를 사용하면 업데이트 로직이 어떻게 동작 하는지와 이벤트 핸들러를 통해 무엇이 일어났는지 를 깔끔하게 분리할 수 있습니다.
• 디버깅 useState에 버그가 있는 경우, state가 어디서 잘못 설정되었는지, 그리고 왜 그런지 알기 어려울 수 있습니다. useReducer를 사용하면, reducer에 콘솔 로그를 추가하여 모든 state 업데이트와 왜 (어떤 action으로 인해) 버그가 발생했는지 확인할 수 있습니다. 각 action이 정확하다면, 버그가 reducer 로직 자체에 있다는 것을 알 수 있습니다. 하지만 useState를 사용할 때보다 더 많은 코드를 살펴봐야 합니다.