[React] useReducer란? (개념과 use case 살펴보기)

useReducer란 무엇일까?

useReducer는 리액트에서 제공하는 상태관리를 위한 훅입니다. useState와는 다른 상태관리를 할 수 있다는 것이 장점인데요. 이 훅을 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있는게 장점입니다. 다른 파일에 작성 후 불러와서 사용할 수도 있습니다.

 

useReducer의 구성요소

const reducer = (state,action) => {

}

const initialState = {

}

function App(){
	const [state,dispatchFn] = useReducer(reducer,initialState);
    
    //이하생략..
}

useReducer는 reducer 함수와 초기값인 initialState를 인자로 받아야 합니다. reducer는 상태가 바뀌는 곳이라고 생각하면 되고 initialState는 말그대로 초기 상태를 저장해놓은 것입니다. reducer함수는 state와 action을 매개변수로 받습니다. action을 통해 상태가 어떻게 바뀌었으면 좋겠는지 정할 수 있으며 state에는 현재의 상태가 담기게 됩니다. dispatchFn은 컴포넌트 안에서 쓰이며 reducer에서 특정 동작을 수행할 수 있도록 명령하고 인자를 넘기는 역할을 수행합니다.

 

그럼 위를 그림으로 쉽게 이해할 수 없을까요?

출처: 생활코딩 (https://www.youtube.com/watch?v=E7bNzWrlKTE) 캡쳐본

reducer함수 내에서 action에 따른 상태 업데이트 로직이 있습니다. 고객은 그저 창구인 dispatch를 통해 action을 알려주면 은행 장부(state)가 회계직원이 만든 절차에 따라(reducer함수) 업데이트 되는 것입니다.

 

간단한 Counter예제로 useReducer알아보기

import React,{useReducer} from 'react';

const reducer = (state,action) => {
  if(action === 'plus'){
    return state+1;
  }
  else if(action === 'minus'){
    return state-1;
  }
}

export function App(props) {
  const [count, dispatch] = useReducer(reducer,0);

  const onPlus = () => {
    dispatch('plus')
  }

  const onMinus = () =>{
    dispatch('minus')
  }

  return (
    <div className='App'>
      <h1>Count: {count}</h1>
      <button onClick={onPlus}>+</button>
      <button onClick={onMinus}>-</button>
    </div>
  );
}

// Log to console
console.log('Hello console')

컴포넌트안에서는 그저 dispatch안에 명령을 하나 넣고 호출해주면 상태가 바뀝니다. 이는 매우 간단한 예제라 useReducer의 장점이 들어나 보이지 않지만 상태관리가 복잡해지고 서로 다른 상태들이 서로의 변화에 영향을 주고 받는 복잡한 상황이 생길시에(특히나 비동기에) useReducer는 유용하게 쓰일 수 있습니다.

 

그러면 언제 쓰는게 Best일까?

프로그래밍에서 정답은 없는 것 같습니다. 사실 정말 애매한 부분이라고 생각합니다.  자신만의 기준이 있다면 그대로 적용하면 되는게 우선 좋을 것 같다고 생각했습니다.

https://react.vlpt.us/basic/20-useReducer.html

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook

위 글을 참고해보시면 쓰신 분께서는 상태가 여러개이고, setter를 한 함수에서 여려번 사용해야 하는 일이 발생한다면 useReducer적용에 대한 고민을 하신다고 합니다.

 

 

더 알면 좋은 내용

  const validatePasswordHandler = () => {
    // setPasswordIsValid(enteredPassword.trim().length > 6);
    dispatchPassword({ type: "INPUT_BLUR" });
  };

그리고 이건 유데미 리액트 강의에서 가져온 내용인데 상태를 setter로 업데이트 할 때 다른 상태를 참조하는 것은 문제가 될 수도 있습니다.(위에서 주석처리 한 부분) 그 다른 상태라는 것이 최신값이 아닐 수 있기 때문이죠. 같은 상태라면 콜백함수를 쓰겠지만 다른 상태이기 때문에 쓰지는 못합니다. 매우 드문 케이스이지만 비동기로 코드가 돌아가는 경우가 있다면, 즉, setter를 통해 상태를 바꾸려는중에 참조하는 다른 상태값이 바뀌고 그게 적용되어야 한다면 적용되지 않을 것입니다. 이때 상태를 하나로 관리하면 해결할 수 있을 것입니다.