[Node] React 정리(14) - useReducer를 사용하여 상태 업데이트 분리

 

리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 전 시간에서는 useCallback 과 같이 React.memo를 사용하여 컴포넌트 리렌더링을 방지해보았습니다. 오늘은 useReducer를 사용하여 상태 업데이트 로직을 분리하는 과정을 해보겠습니다.

 

 현재 정리부터는 소스코드를 제공할 예정입니다. 제공하는 소스코드를 이용하여 따라하실 수 있고 개념을 확실히 잡을 꺼 같아서 올리게 되었습니다. 소스코드 자료는 아래 링크를 참고해주세요.

https://github.com/libtv/React_Note/tree/master/14.%20useReducer

GitHub - libtv/React_Note: This is a notebook organized by React.

 

그러면 useReducer 기초와 사용법 에 대해 배워보도록 합시다.

 

 

# Contents

---

• 사용하는 이유
• useReducer 기초와 사용법

 

 

# 사용하는 이유

---

 우리가 이전에 만든 사용자 리스트 기능에서의 주요 상태 업데이트 로직은 App 컴포넌트 내부에서 이루어졌었습니다. 상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해주었는데요, 상태를 관리하게 될 때 useState 를 사용하는것 말고도 다른 방법이 있습니다. 바로, useReducer 를 사용하는건데요, 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있지요. 

 

다음은 이전의 작성하였던 코드입니다. Counter.js

 

import react, { useState } from "react";

function Counter() {
    var [number, setNumber] = useState(0);

    function onIncrease() {
        setNumber(++number);
    }

    function onDecrease() {
        setNumber(--number);
    }

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

export default Counter;

 

위에서는 useState를 이용하여 내부에서 시작하여 내부로 전달하도록 하였습니다.

지금부터는 외부에서 useReducer를 이용하여 변수의 값을 가져오는 방법을 소개해보도록 하겠습니다.

 

 

# useReducer 기초와 사용법

---

 useReducer 를 사용하기 전에 우선 reducer 가 무엇인지 알아보겠습니다. reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 입니다. 아래와 같은 코드를 보겠습니다.

 

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

 

파라미터로 현재 상태와 액션 객체를 받아서 다음 상태로 반환해주는 것을 확인할 수 있습니다. reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 됩니다. 여기서 action 은 업데이트를 위한 정보를 가지고 있습니다. 주로 type 값을 지닌 객체 형태로 사용하지만, 꼭 따라야 할 규칙은 따로 없습니다.

 

액션의 예시들을 확인해볼까요?

 

// 카운터에 1을 더하는 액션
{
  type: 'INCREMENT'
}

// 카운터에 1을 빼는 액션
{
  type: 'DECREMENT'
}

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

// 새 할 일을 등록하는 액션
{
  type: 'ADD_TODO',
  todo: {
    id: 1,
    text: 'useReducer 배우기',
    done: false,
  }
}

 

보신 것 처럼 action 객체의 형태는 자유입니다.

자, 이제 reducer 를 배웠으니 useReducer 의 사용법을 알아봅시다. 

 

useReducer 의 사용법은 다음과 같습니다.

 

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

 

여기서 state 는 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태를 가르키게 되고, dispatch 는 액션을 발생시키는 함수라고 이해하시면 됩니다.

 

이 함수는 다음과 같이 사용합니다.

 

 dispatch({ type: 'INCREMENT' })

 

그리고 useReducer 에 넣는 첫번째 파라미터는 reducer 함수이고, 두번째 파라미터는 초기 상태입니다.

그럼, Counter 컴포넌트를 만약에 useReducer 로 구현한다면 어떻게 바뀌는지 알아볼까요?

 

다음 코드를 한번 따라서 작성해보세요.

 

import react, { useState, useReducer } from "react";

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

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

    function onIncrease() {
        dispatch({ type: "INCREMENT" });
    }

    function onDecrease() {
        dispatch({ type: "DECREMENT" });
    }

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

export default Counter;