상태관리 (useReducer)_React

정의

• 상태를 관리하게 될 때 useState 를 사용하는것 말고도 다른 방법이 있다.
• 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
• 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수 있다.

reducer

• 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수
• reducer에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다

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

• 여기서 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,
  }
}

useReducer

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

• state: 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태를 가르킴
• dispatch: 액션을 발생시키는 함수 dispatch({ type: 'INCREMENT' })
• useReducer에 넣는 첫번째 파라미터는 reducer 함수
• 두번째 파라미터는 초기 상태

예제

//useState 사용
import React, { useState } from 'react';

const Counter = () => {
  const [number, setNumber] = useState(0);

  const handleCounterUp = () => {
    setNumber(number + 1);
  };

  const handleCounterDown = () => {
    setNumber(number - 1);
  };

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

export default Counter;

//useReducer 사용
import React, { useReducer } from 'react';

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

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

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

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

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

export default Counter;