Posted 2022-06-27프론트엔드 / React0 visits

useReducer는 언제 사용할까?

Redux패턴을 사용하여 state를 관리하는 Hook

제목 그대로, useReducer는 Redux에서 상태관리를 하는 패턴을 통해 state를 관리할 수 있도록 해주는 Hook이다.

배열 왼쪽에 state가 들어가는 것은 useState와 동일하다. 하지만 dispatch를 통해 state 변경을 시도한다는 점은 useState와 차이점이 도드라지는 부분이라고 볼 수 있다.

바로 아래 코드를 통해 전체적인 활용 플로우가 어떻게 되는지 확인해보도록 하자.

// Count 컴포넌트
export const Count = () => {

	const [state, dispatch] = useReducer(reducer, 0)

	const handleClick = () => {
		dispatch({ type: 'add', value: 1 })
	}

	console.log(state.count) // 콘솔을 통해 state의 count가 어떻게 변화하는지 확인

	return ...
}

위의 코드를 실행하면, reducer에 dispatch안에 담은 객체가 전달되어 넘어가게 된다. 그리고 reducer는 해당 인자를 통해 state를 변경시킨다.

const reducer = (state, action) => {
  switch (action.type) {
    case 'add':
      // 위에서 넘겨준 action.value와 기존 state값을 더해준다.
      return { count: state.count + action.value };
  }
};

그리고 위와 같이 “컴포넌트 외부”에 선언된 reducer 함수를 통해 state가 변경 및 관리된다.

useState와의 차이점

그렇다면, 위에서 활용한 상태관리와 useState 사이에는 도대체 어떤 차이점이 있는걸까?
솔직히 방식만 다를 뿐이지 큰 차이점을 아직까지는 체감을 못하겠는게 정상이다.

먼저 결론부터 얘기하자면, 복잡한 상태를 사용해야 할 때, 그리고 컴포넌트 외부에서 상태를 관리해야 할 때 useReducer를 사용하는 것이 좋다. (따라서 위의 예시 코드와 같은 경우는 그냥 useState를 사용하는게 좋다)

복잡한 상태를 핸들링 해줘야 할 때

쉽게 풀어서 설명하자면, state값이 정수 또는 boolean값과 같이 단일하고 단순한 값이라면 굳이 useReducer를 사용할 필요가 없다.

하지만, 아래와 같이 복잡한 상태를 관리해줘야 할 때는 useReducer의 사용을 고려해보는 것이 좋다.

setUser({
  id: 0,
  userName: 'hoon',
  gender: 'male',
  country: 'Korea',
  married: false,
});

딱 봐도 위와 같이 복잡한 state는 코드를 짜는 입장에서 굉장히 번거로워 보인다. id만 바꾸고 싶을 때, country만 바꾸고 싶을 때가 분명히 있을텐데… useState를 사용하게 된다면 상술한 바와 같이 모든 key-value를 작성해줘야 되기 때문이다.

1 2	// userName만 변경시키고 싶다면? 아래와 같이 한 줄의 코드만 작성해도 충분하다. dispatch({ type: 'changeName', value: 'hoonjoo' });

컴포넌트 외부에서 자주 상태를 변경해야 할 때

그리고 또 하나의 주요한 차이점은, setState는 컴포넌트 내부에 존재하지만,
useReducer의 action과 reducer는 컴포넌트 외부에 선언되어 활용될 수 있다는 점이다.

기존에 useState를 사용할 때는 setState가 컴포넌트 내부에만 존재할 수 있었다. 그리고 또한, 해당 setState를 하위 컴포넌트에 props로 전달해주기 위해서는 callback처럼 하위 컴포넌트에 넘겨서 전달해주는 방식을 활용해야 했었다.

하지만, useReducer에서 상태를 관리 및 변경하는 로직(reducer와 action)은 컴포넌트 외부에 존재할 수 있다.

결론

따라서… 프로젝트 규모가 커서 state를 관리하는 로직이 밖에 존재해야 더 효율성이 증진될 수 있을 때, 또는 state의 구조가 복잡할 경우에는 useReducer의 사용을 충분히 고려해볼 법 하다.