[React] 리액트 useReducer사용법

🎯 useReducer사용법

const [<상태 객체>, <dispatch 함수>] = useReducer(<reducer 함수>, <초기 상태>, <초기 함수>)

import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import React, { useReducer } from 'react'

// count의 초기 state를 0으로 설정하세요.
const initialState = {
    count: 0,
};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  // useReducer()를 호출하세요.
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

ReactDOM.render(<Counter />,document.getElementById('root'));

serviceWorker.unregister();

• useState()의 대체 함수로 많이 사용된다.
• reducer 함수는 현재 상태 객체와 수행할 행동 객체를 인자로 받아서 새로운 상태 객체를 반환하는 함수이다.
• dispatch 함수는 컴포넌트 내에서 상태 변경을 일으키기 위해서 사용되는데 인자로 reducer 함수에 넘길 행동 객체를 받는다.
• 행동 객체는 일반적으로 어떤 부류의 행동인지를 나타내는 type이나 해당 행동과 관련된 데이터를 담고 있다.
• 컴포넌트에서 dispatch 함수에서 넘겨준 행동을 하면 reducer 함수가 이 행동에 따라서 상태를 변경해준다.
• 이렇게 구현하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있다.
• 즉, 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고 심지어 다른 파일에 작성 후 불러와서 사용할 수도 있다.