[React] useState vs useReducer

🤔 상태 관리를 왜 해야 할까?

DOM을 직접 조작하는 것이 아니기 때문이다. React는 JSX 문법으로 이루어진 코드로 가상 DOM을 생성하여 실제 DOM에 변경사항을 반영한다. 이렇게 함으로써 불필요한 렌더링을 줄일 수 있는데 이 가상 DOM을 만들 때 상태 값 변화에 따라 컴포넌트가 재구성되고 리렌더링이 이루어진다.

고로 상태 관리는 매우 중요하며 hook과 라이브러리를 통해서 다양하게 관리할 수 있다. 수많은 상태관리 방법 중에 기초라고 할 수 있는 useState와 useReducer 사용하는 방법을 정리하면서 이해해보자.

useState

• state를 관리해주는 함수.
• 상태의 기본값을 인수로 넘겨줌.
• 해당 함수를 호출하면 배열이 반환됨.
  => 1번째 요소 : 현재 상태, 2번째 요소: setter 함수.
• setter 함수는 인수로 전달 받은 값을 state 값으로 설정.
  => state가 업데이트 될 때마다 렌더링.
  

📍 아래 예제는 다음과 같다.

1. React와 useState를 import.
2. App 컴포넌트 정의.
3. useState를 사용하여 장바구니 물품 개수를 관리. (초기값은 0)
4. 버튼 클릭시 setter 함수를 호출하여 상태값 변경.
5. 상태값 변경으로 화면 리렌더링됨.

import React, { useState } from 'react';

const App = () => {
	const [cart, setCart] = useState(0); // 배열 비구조화 할당	
  	const onAddHandler = () => {
    	if(cart > 10) {
        	alert('10개 이상은 추가할 수 없습니다.');
          	return;
        }
      
      	setCart(prevCart => prevCart + 1);
    }
    
    return (
      	<div>
      		<div>장바구니 물품 {cart}개</div>
			<button onClick={onAddHandler}>추가</button>
      	</div>
    );
};

🧐 state 업데이트시 prevCart의 의미는?
state as snapshot을 의미한다. React가 state 값을 변경할때 가장 최신의 state값을 기준으로 업데이트를 하고 싶을 때 사용되는 개념이라고 할 수 있다.

useReducer

• ustState보다 좀 더 복잡한 상태 관리가 필요한 경우 사용.
• reducer 함수, 초기 상태값, 초기 함수 인수를 받음.
• 해당 함수를 호출하면 배열이 반환됨.
  => 1번째 요소 : 현재 상태, 2번째 요소: dispatch 함수.
  

reducer관련 개념	내용
reducer	현재 state와 action을 두 개의 인수로 받아 새로운 상태를 반환하는 함수 dispatch가 전달한 액션 객체에 따라 상태를 업데이트 (state, action) => newState의 형태
초기 상태값	처음에 설정해주는 값
초기 함수	초기 state를 지연해서 생성
dispatch	컴포넌트 내의 상태를 업데이트하기 위해 사용 reducer의 액션 객체를 넘김

📍 아래 예제는 다음과 같다.

1. React와 useReducer를 import.
2. App 컴포넌트 정의.
3. useReducer를 사용하여 장바구니 물품 개수를 관리. (초기 상태 값은 {cart: 0})
4. 버튼 클릭시 dispatch 함수를 호출하여 타입이 ADDCART인 action 객체 전달.
5. reducer 함수가 action 객체를 전달받아 타입이 같은 케이스를 찾아 상태 변경 후 반환.
6. 상태가 변경되고 리렌더링.

import React, { useReducer } from 'react';

// 초기값 
const initialState = { cart: 0 };

// reducer 함수
const reducer = (state, action) => {
	switch(action.type){
      case 'ADDCART':
        if(cart > 10) {
        	throw new Error('10개 이상은 추가할 수 없습니다.');
        }
        
        return { cart: state.cart + 1 };
    }
};

// App 컴포넌트
const App = () => {
	const [state, dispatch] = useReducer(reducer, initialState);
  	const onAddHandler = () => dispatch({ type: 'ADDCART' });
  
	return (
    	<div>
      		<div>장바구니 물품 {state.cart}개</div>
			<button onClick={onAddHandler}>추가</button>
      	</div>
    )
}

useState vs useReducer

위의 동일한 로직을 useState와 useReducer로 작성해보았다. 사실 간단한 로직이기에 어떻게 보면 useState로만 작성을 해도 된다. 하지만 이점은 잠시 배제하고 코드를 살펴보자.

• onAddHandler 함수

1. useReducer를 사용하여 작성한 코드가 useState로 작성한 코드보다 간결.
2. 비즈니스 로직을 작성한 부분이 reducer 함수에 있음.
3. type을 통해 어떤 기능을 구현하고 있는지 나타내 가독성 측면에서도 좋음.

// useState를 사용한 경우
const onAddHandler = () => {
  if(cart > 10) {
    throw new Error('10개 이상은 추가할 수 없습니다.');
  }

  setCart(prevCart => prevCart + 1);
}

// useReducer를 사용한 경우
const onAddHandler = () => dispatch({ type: 'ADDCART' });

• 일관성 및 확장성 측면
  위와 같은 비즈니스 로직이 한두개가 아니고 점점 많아질 가능성이 있다면 아래와 같이 useReducer를 사용하게 되면 일관성있는 패턴으로 코드를 작성할 수 있다.

const onAddHandler = () => dispatch({ type: 'ADDCART' });
const onDeleteHandler = () => dispatch({ type: 'DELETECART' });

비즈니스 로직이 훨씬 더 길어지고 프로젝트의 규모가 클 경우 useReducer를 사용하면 간결하고 어떤 로직을 실행하고 있는지 한눈에 파악할 수 있으며 일관성있게 코드를 작성할 수 있다.
🚨 가장 중요한 점은 개발 상황에 맞게 hooks를 사용해야한다는 것이다!!!

🍑 오늘의 공부 일기

오늘은 useReducer의 필요성을 정리할 수 있었던 시간.
상태를 가공하여 setter 함수를 호출하는 경우가 있다. 이 상태를 가공하는 로직이 복잡하면 useReducer를 사용하는 것이 훨씬 코드의 가독성을 높일 수 있었다. 컴포넌트에서 dispatch 함수의 타입으로 해당 비즈니스 로직이 어떤 역할을 하는지 파악을 할 수 있었다.
이런 차이점을 알고 코드를 구현하도록 해야겠다.

참고 자료
https://cpro95.tistory.com/m/642
https://react.vlpt.us/basic/07-useState.html
https://velog.io/@tnsdlf158/React-Hooks-useReducer