useState vs useReducer

0. 상태 관리를 왜 해야 할까? 

DOM을 직접 조작하는 것이 아니기 때문이다. React는 가상 DOM을 생성해서 실제 DOM에 변경사항만을 반영한다. 이처럼 상태 관리는 매우 중요하며 hook과 라이브러리를 통해 다양하게 관리할 수 있다. 그리고 대표적으로 아래 2가지의 상태 관리 방법이 있다. 

 

1. useState

• state를 관리해주는 함수이다
• setter함수는 인수로 전달 받은 값을 state값으로 설정하여 업데이트 한다.
• 코드 구조

const [state, setState] = useState(initialState)

• state - 현재 상태
  setState - 업데이트 할 상태
  initialStae - 초기 상태 
• 비유: 성재가 은행에 방문해서 1만원 출금한다는 가정을 해보자. 근데 은행에 직원이 없어 성재가 직접 통장을 꺼내서 거래 내역을 수정해야 한다. 즉, 요청 -> 처리 -> 반영을 본인이 다 해야 한다. 

 

2. useReducer

• 언제 사용? useState보다 더 복잡한 상태 관리(아래 코드처럼), 즉 업데이트 해야 할 값들이 많을 때 사용
• 코드 구조

const [state, dispatch] = useReducer(reducer, initialState);

• reducer - state를 업데이트 하는 역할
  dispatch - state 업데이트 위한 요구
  action - 요구의 내용 
• 비유: 이번에도 성재가 은행에 방문한다는 가정을 해보자. 성재는 은행에 가서 1만원 출금을 요청(dispatch)한다. 출금된 1만원을 거래 내역에 기록(action)해야 하는데 이 작업을 성재가 직접 하진 않는다. 은행이 성재의 요구에 따라 내역을 업데이트(reducer) 해주기 때문이다. 아래 그림으로 이해하면 더 직관적일 것이다.