useState() vs useReducer()

📌 useState()

• state 관리 도구
• 단순 상태 업데이트, 복합적이지 않은 상태, 연결되지 않는 상태
• 간단한 컴포넌트나 단일 상태 변수를 다루기에 적합하다.
• 개별적인 상태를 다루기에 적합하고, 각 상태 변수는 독립적으로 동작한다.
• 단순한 상태 업데이트와 컴포넌트 간 연결이 적은 경우에 유용하다.

 

📌 useReducer()

• state 가공
• 최신 state 스냅샷, 복잡한 로직
• 주로 복잡한 상태 로직이나 여러 상태 간의 관계가 있는 경우에 유용하다.
• 복잡한 상태 업데이트 로직을 포함하거나 여러 상태를 동시에 업데이트할 때 적합하다.
• 연관된 상태 조각들로 구성된 상태 관련 데이터를 다루는 경우 사용한다.
  ex) 폼 인풋 state
• state 하나를 변경하는 여러 액션이 있는 경우(데이터 상태에 따라 분기 처리 필요) 사용한다.
  ex) 유효성 검사
• 기존의 상태를 직접 변경하지 않고 새로운 상태를 반환한다.
• state와 action을 이용하여 새로운 상태를 계산하고 반환한다.

 

🔥useEffect와 useState를 이용해 useReducer 작업을 대신 할 수 있다. 그러나 useReducer가 더 간단할 것 같다.