[React] useReducer

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.useReducer 

React의 Hook 중 하나로, 상태 관리의 복잡성을 다루기 위해 사용됩니다.
useState보다 복잡한 상태 로직을 관리해야 할 때 유용합니다

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

• state: 현재 상태를 나타냅니다.
• dispatch: 상태를 변경하기 위해 호출하는 함수입니다.
• reducer: 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.
• initialState: 상태의 초기값입니다.

1-1.리듀서 함수 (reducer)

상태를 어떻게 업데이트할지 결정하는 함수입니다.
매개변수
state: 현재 상태를 나타냅니다.
action: 상태를 업데이트할 방법을 정의하는 객체입니다.

동작
action.type에 따라 상태를 업데이트합니다.
정의되지 않은 액션 타입이 들어오면 에러를 발생시킵니다.

 

 

1-2.state

현재 상태를 나타내며, reducer 함수가 반환하는 상태 값입니다.

 

 

1-3.dispatch

상태를 업데이트하기 위해 사용하는 함수입니다.
이 함수는 액션 객체를 인수로 받아 reducer를 호출합니다.

 

 

2.예시

import React, { useReducer } from 'react';

// 상태와 액션을 처리하는 리듀서 함수
// 이 함수는 현재 상태와 액션을 받아서 새로운 상태를 반환합니다.
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      // 'INCREMENT' 액션을 처리하여 count를 1 증가시킵니다.
      return { count: state.count + 1 };
    case 'DECREMENT':
      // 'DECREMENT' 액션을 처리하여 count를 1 감소시킵니다.
      return { count: state.count - 1 };
    case 'RESET':
      // 'RESET' 액션을 처리하여 count를 0으로 리셋합니다.
      return { count: 0 };
    default:
      // 정의되지 않은 액션 타입이 들어왔을 때 에러를 던집니다.
      throw new Error('Unknown action type');
  }
};

function Counter() {
  // useReducer를 사용하여 상태와 디스패치 함수 설정
  // reducer: 상태 업데이트를 위한 함수
  // { count: 0 }: 상태의 초기값
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>증가</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>감소</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>리셋</button>
    </div>
  );
}

export default Counter;