함수 폼을 사용할 때 업데이트가 이전 state에 의존하는 경우에만 사용해야 한다.
useState를 사용할 때 다른 state의 값을 기반으로 state의 값을 변경하면 위험하다. 제 시간에 처리되지 않아 순서가 보장되지 않을 수 있다.
함수형 업데이트는 useState 훅에서 상태를 업데이트할 때 사용되는 기능이다. useState의 set함수는 이전 최신 값을 가지고 있고 함수형 업데이틀 사용하게 되면 이전 상태를 직접 가져와 참조하고 변경하기 때문에 React가 내부적으로 상태를 안전하게 관리할 수 있다.
setEmailIsValid(enteredEmail.includes("@"));
setEmailIsValid(()=>enteredEmail.includes("@"));하지만 위의 두 코드 모두 의미가 없는 것이 setEmailIsValid 함수가 가지는 최신 state는 콜백함수 내부의 enteredEmail가 원하는 최신 값이 아니므로 소용이 없다.
이러한 상황에서는 useReducer를 사용하여 효과적으로 해결할 수 있다.
아래는 useReducer의 기본적인 구조다.
const [state, dispatchFn] = useReducer(reduceFn, initalState, initFn);## useState 와 useReducer
useState
: 개별 state 들을 다루기 간편하고, 간단한 값 변경에 적합
state 가 만일 단순 값이 아니라 객체일 시에는 useReducer를 고려해보는 것이 바람직하다.
useReducer
: 복잡한 값을 다룰 때 유용하다
객체를 수정하며 객체에 조건을 걸어 dispatchFn에 인수로 전달하면
함수 외부에서 선언한 reduceFn로 연결되어 dispatchFn에서 받은 객체인수를 기반으로 본인만의 복잡한 로직을 구현할 수 있다.
또한 useEffect를 사용하여 조건을 걸 시에 객체로 생성된 state를 구조분해할당하여 객체 전체의 관점에서 업데이트가 아니라 단일 프로퍼티가 업데이트 될 때에만으로도 조건을 걸 수 있어 다양한 상황에서 유용하게 사용할 수 있다.
useReducer는 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다.
