useReducer

useReducer

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

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

• reducer 에서 반환하는 상태는 = 컴포넌트가 지닐 새로운 상태

• action 은 업데이트를 위한 정보를 가짐, 주로 type 값을 지닌 객체 형태로 사용
  action 객체의 형태는 자유

action 예시

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


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


{
  type: 'CHANGE_INPUT',
  key: 'email',
  value: 'hyjoong@velog.io'
}
// input 값을 바꾸는 액션


// Todo LIst 등록하는 액션
{
  type: 'ADD_TODO',
  todo: {
    id: 1,
    text: 'TS 초기세팅',
    done: true,
  }
}

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

state = 컴포넌트에서 사용 할 수 있는 상태
dispatch = 액션을 발생시키는 함수

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

seReducer 에 넣는 첫번째 파라미터는 reducer 함수, 두번째 파라미터는 초기 상태

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;