useReducer 동작원리 이해하기

useReducer는 전역 상태나 여러 컴포넌트에서 공유되는 복잡한 상태를 관리할 때 유용함. 

 

간단한건 useState를 사용함. 둘다 상태를 변경하는 훅이라는건 동일하다. 

 

#예시 

- 사용자 입력값의 상태를 나타내는 inputState와, 유효성 검사결과를 나타내는 isValid 상태가 있다고 가정. 

- 이때 inputState에 따라서 isValid는 true, false로 상태가 달라지게된다. 두 상태값이 서로 연결되어있음.

- 요럴때 useState를 두번 작성하기보다, useReducer를 사용해도 된다는거임!  

 

상태를 정의할 컴포넌트 바깥에 reducer 함수를 정의한다.

 

컴포넌트 내부에 상태를 정의하고,

input의 value가 변경될때마다 실행되는 트리거함수도 정의함. 

이때, 트리거함수가 실행될때 발생하는 이벤트가 reducer 함수에게 전달됨. 

dispatch는 to-be 상태를 전달해주는 배달원 역할! 

 

# 정리 

inputChangeHandler 함수에서 dispatch를 호출할 때 액션 객체를 전달하면,

inputReducer 함수가 그 액션을 처리하고 새로운 상태를 반환.

이렇게 상태를 변경할 때마다 UI가 업데이트되어 사용자에게 새로운 정보를 제공하는것.