반응: useReducer 후크 소개

이 기사에서는 최소한 React 사용에 대한 지식이 있고 React Hooks를 탐색하고 싶다고 가정합니다.

useReducer

이 후크는 애플리케이션에서 복잡한 상태를 처리하는 데 사용됩니다. redux 상태 관리 패턴에서 영감을 얻었습니다(redux에 익숙하지 않은 경우 확인할 수 있습니다here). useState 후크와 마찬가지로 상태를 저장하고 업데이트하는 데 사용됩니다. 감속기 기능을 첫 번째 매개변수로 받아들이고 초기 상태를 두 번째로 받아들입니다.

현재 값을 포함하는 배열과 reducer 함수에 작업을 전달할 수 있는 디스패치 함수를 반환합니다.

통사론:

const [state, dispatch] = useReducer(reducerFn, initialState)

상태 - 현재 상태의 값입니다.

dispatch - reducerFn을 호출하는 데 사용되는 메서드입니다. 작업 유형을 나타내는 개체를 허용합니다. 감속기 기능에 작업 유형을 보내고 상태를 업데이트합니다.

reducerFn - 동작 유형에 따라 트리거되는 일부 상태 데이터를 반환하는 함수입니다.

initialState - 상태의 초기 값.

예를 들어 이해

다음 예제에서는 버튼을 눌러 카운터를 증가 및 감소시키는 간단한 앱을 만듭니다. 이를 위해 useReducer를 사용할 것입니다.

import { useReducer } from 'react';

const initialState = {
  counter: 0
};

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

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div style={{ margin: 12 }}>
      <div> {state.counter}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>

    </div>
  );
}

export default MyComponent;

여기서 우리는 구성 요소의 맨 위에 있는 useReducer 후크를 가져옵니다. 모든 값이 디스패치 메서드를 사용하여 전달되므로 구성 요소 외부에서 initialState 및 reducer 함수를 정의합니다.

리듀서 함수는 state와 action이라는 두 가지 인수를 취합니다. state는 현재 상태의 값을 보유하고 초기 렌더링에서 값은 initialState 객체이며 action은 트리거할 작업과 조건을 확인하는 데 사용됩니다. type은 리듀서 함수 내에서 트리거할 조건을 결정하기 위해 디스패치 작업에서 전달하는 속성입니다.

구성 요소는 카운터 상태 값이 변경될 때마다 다시 렌더링됩니다.

useReducer는 언제 사용하나요?

위의 코드 예제에서 useReducer 구현이 useState 후크보다 훨씬 길다는 것을 알 수 있습니다. 컴포넌트의 상태가 복잡한 구조를 가지고 있다면 useReducer를 사용하는 것이 좋습니다. 많은 속성을 가진 객체를 생각하십시오.

useReducer는 Redux를 대체합니까?

대답은 아니오입니다. redux를 대체하기 위한 것이 아니라 복잡한 상태 논리가 있는 구성 요소에서 사용해야 합니다. 어떤 사람들은 useReducer 기능이 redux를 대체하기 위한 것이라고 생각하는 경향이 있습니다. 실제로 useReducer는 구성 요소로만 제한됩니다.

그리고 그게 전부입니다. 읽어 주셔서 감사합니다!

질문이나 피드백이 있는 경우. 아래에 자유롭게 의견을 말하십시오.