[React] useReducer

 

 

 

▷ useReducer( )

- useState()의 대체 함수로 많이 사용

- useState()보다 상대적으로 복잡하고 많은 데이터를 관리하기 위하여 사용

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

• reducer 함수: 현재 상태의 객체(state)와 수행할 행동 객체(action)을 인자로 받아서 새로운 상태 객체를 반환하는 함수
• dispatch 함수: 인자로 reducer 함수에 넘길 행동 객체(type)를 받음, 컴포넌트 내에서 상태 변경을 일으키기 위하여 사용

import ReactDOM from 'react-dom';
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()를 호출
  // useReducer의 인자로 reducer 함수와, 초기상태를 넘겨줌
  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'));