🌙 [React] Hook - useReduce

🌊 Hook - useReducer

: useReducer는 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다.

Reducer는 현재 상태, 그리고 업데이트를 위한 필요한 정보를 담은 액션 값을 전달받아 새로운 상태로 반환하는 함수이다. Reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다.

 

function reducer(state, action){
 return {...}; // 불변성을 지키면서 업데이트한 새로운 상태를 반환한다.
}

 

액션 값은 주로 다음과 같은 형태로 이루어져 있다.

리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요는 없으며, 객체가 아니라 문자열이나 숫자열이어도 상관 없다.

{
 type : 'INCREMENT',
 // 다른 값들이 필요하다면 추가로 들어감
}

 

useReducer

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      // 이무 것도 해당되지 않을 때 기존 상태 반환
      return state;
  }
}

const CounterReducer = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{state.value}</b>입니다.
      </p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
    </div>
  );
};

export default CounterReducer;

 

useReducer를 사용했을 때의 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 뺴낼 수 있다는 점이다.

useReducer

 

 

import React, { useReducer } from 'react';

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value,
  };
}
const InfoReducer = () => {
  const [state, dispatch] = useReducer(reducer, {
    name: '',
    nickname: '',
  });
  const { name, nickname } = state;
  const onChange = (e) => {
    dispatch(e.target);
  };
  return (
    <div>
      <div>
        <input
          name='name'
          value={name}
          onChange={onChange}
        />
        <input
          name='nickname'
          value={nickname}
          onChange={onChange}
        />
      </div>
      <div>
        <b>이름 : </b> {name}
      </div>
      <div>
        <b>닉네임 :</b> {nickname}
      </div>
    </div>
  );
};

export default InfoReducer;

useReducer를 사용하여 useState 여러 개로 관리하던 상태를 한 번에 관리 할 수 있다.

useReducer에서의 액션은 그 어떤 값도 사용 가능하기 때문에 이벤트 객체가 지니고 있는 e.target 값을 액션 값으로 사용한 예시다. 이렇게 인풋을 관리하면 아무리 인풋의 갯수가 많아져도 코드를 짧게 유지할 수 있다.

 

리액트를 다루는 기술 을 참고하였습니다.