[react] useReducer 훅에 대해 알아보자 Feat. 유데미 리액트 강의

useReducer

우리는 react에서 useState로 상태관리를 할 수 있었고 이는 꽤 간단하다. 하지만 조금의 복잡한 상태를 다루어야 한다면 useReducer를 고려해보자 복잡한 상태의 경우 useState만을 사용하면 어려워지고 오류가 생길 수 있기 때문이다.

 

문제가 될만한 부분

다른 state를 기반으로 state를 업데이트 할 때 문제가 생길 수 있다. -> useReducer를 사용하는 것이 좋다. 하나의 state, 객체를 만들어서 보관할 수도 있지만 더 복잡해지기 때문에 잘 사용하지 않는다.

 

예시코드

const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn);

 

useReducer 사용해보기

 const [enteredEmail, setEnteredEmail] = useState('');
 const [emailIsValid, setEmailIsValid] = useState();

위 코드를 한 상태에 묶어서 사용하고 싶다. 이때 useReducer를 사용한다.

위와 같이 해준다. dispatch로는 상태를 바꾸고 싶을 때 호출하는 함수가 되겠다. reducer는 action을 수행할 함수이다.

 

 

위는 dispatch를 사용한 것이다. 

 

확실히 다른 상태로 부터 상태업데이트를 하지 않는다는 장점이 있다.