React Hooks : useReducer() 함수

 

상태를 업데이트 하는 방법 중 하나는 useState 함수를 사용해 앱 컴포넌트 내부에서 상태 관리를 하는 것이었다.

하지만 useReducer 함수를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여,

컴포넌트 외부에서도 상태 관리를 할 수 있다.

즉, useState는 컴포넌트 내부에만 업데이트 로직을 작성해야했지만,

useReducer 함수를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다.

 

 

useReducer 함수 사용법

 

step1) 컴포넌트 외부에 상태 업데이트 로직을 담은 reducer 함수 작성

 

reducer 함수 : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

 

기본 형태 :

function reducer(state, action) { ... }

 

- state : 현재 상태

- action : 업데이트와 관련된 정보를 가진 객체

- return 값 : 컴포넌트가 지닐 새로운 상태 (업데이트 될 값)

 

 

action : 주로 type 값을 가진 객체 형태로 사용하며, type 값을 대문자로 구성하는 관습이 있다.

//action example

// 숫자 빼기 action
{
  type: 'DECREMENT'
}

// input 값을 바꾸는 action
{
  type: 'CHANGE_INPUT',
  key: 'email',
  value: 'tester@react.com'
}

 

Counter.js

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

 

: useReducer 함수를 import 해준다.

switch문을 사용해서 action 객체에 담긴 type에 따라 상태 업데이트 로직을 작성한다.

action.type이 INCREMENT인 경우 현재 상태에서 +1 을 해주는 로직이다.

  

 

step2) useReducer 함수 사용

 

const [state, dispatch] = useReducer(reducer, initialState);

 

- state : 현재 상태

- dispatch : action을 발생시키는 함수

  함수 사용 법 (ex) dispatch({ type: 'INCREMENT' })

- reducer : 상태 업데이트 로직을 담은 함수

- initialState : 초기 상태

 

 

Counter.js

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [number, dispatch] = useReducer(reducer, 0);

  const onIncrease = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const onDecrease = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

const [number, dispatch] = useReducer(reducer, 0);

 

: 현재 상태값에 number라는 이름을 주고, 액션을 발생시키는 함수 dispatch를 가져온다.

useReducer 첫 번째 파라미터로 위에서 작성한 reducer 함수를 넣어주고, 초기값은 0으로 설정한다.

 

const onIncrease = () => { dispatch({ type: 'INCREMENT' }); };

 

: 액션이 필요한 함수에 dispatch를 호출하고 인자로 type이 담긴 객체 형태를 넣어준다.

 type을 INCREMENT로 전달해주면 위 reducer 함수에서 현재 상태에서 +1을 한 상태값을 반환해준다.

 

<h1>{number}</h1>

 

: 상태 업데이트가 되는 number 변수를 가져온다.

 

 

 

useState  vs  useReducer

 

컴포넌트에서 관리하는 값이 1개이고, 단순한 숫자나 문자열 같은 값이라면 useState를 사용하는 것이 편하다.

하지만 컴포넌트에서 관리하는 값이 많아지고 상태의 구조가 복잡해진다면 useReducer를 사용하는 것이 편하다.