코드 크기
useState
•
미리 작성해야하는 코드가 줄어든다.
useReducer
•
reducer 함수와 dispatch를 모두 작성해야하지만 비슷한 로직을 사용하는 곳에서 코드를 많이 줄일 수 있다.
가독성
useState
•
간단한 update때 읽기 더 편하다.
•
state 업데이트 로직이 복잡해질 수록 크기를 컴포넌트의 코드양이 비대해지고 가독성이 떨어진다.
useReducer
•
복잡해질 수록, 반복될수록 사용해야한다.
•
state 업데이트 로직과 event handler의 로직을 깔끔하게 분리한다.
디버깅
useState
•
state가 어디에서 어떻게 잘못 설정되었는지 확인하기 어렵다. 따로 떨어진 모든 업데이트에 console.log를 추가해가며 업데이트해야한다.
useReducer
•
간단하게 reducer에 console.log만 추가해도 모든 업데이트를 확인할 수 있다.
테스팅
useReducer
•
reducer가 순수함수이며 컴포넌트 종속적이지 않을 경우 따로 분리하여 테스트 하기 편하다.
결론
•
둘다 비슷하다. 선호에 따라 왔다 갔다하며 사용해도 된다.
•
같은 컴포넌트에 useState나 useReducer 모두 사용해도 된다.
reducer 작성 팁
•
reducer는 반드시 순수해야한다.
◦
reducer는 렌더링 도중에 실행되므로 순수해야함.
◦
같은 입력은 같은 결과물을 내뱉어야 한다.
◦
timeout 이나 request, 다른 side effects를 만들면 안됨
•
모든 action은 하나의 유저 상호작용을 뜻한다. → 아무리 많은 데이터 변경이 있더라도.
◦
사용자가 reducer가 관리하는 5개의 필드가 있는 양식에서 '재설정'을 누른 경우, 5개의 개별 set_field 액션보다는 하나의 reset_form 액션을 전송하는 것이 더 합리적이다.