useReducer 대 useState 3 useReducer()를 useState()보다 사용해야 하는 이유

그것이 무엇인지

useReducer()는 useState와 유사하지만 상태를 관리하기 위해 더 많은 제어를 제공하는 React Hooks API의 메소드입니다. 감속기 함수와 초기 상태를 인수로 취하고 상태 및 디스패치 메서드를 반환합니다.

const [state, dispatch] = React.useReducer(reducerFn, initialState, initFn);

리듀서(배열 메서드에 전달할 함수 유형 때문에 호출됨Array.prototype.reduce(reducer, initialValue))는 Redux에서 가져온 패턴입니다. Redux에 익숙하지 않다면 간단히 말해서 리듀서는 이전 상태와 동작을 인수로 받아 다음 상태를 반환하는 순수 함수입니다.

(prevState, action) => newState

액션은 무슨 일이 일어났는지 설명하는 정보이며, 해당 정보를 기반으로 리듀서는 상태가 어떻게 변경되어야 하는지 지정합니다. 작업은 dispatch(action) 메서드를 통해 전달됩니다.

그것을 사용하는 3가지 이유

대부분의 경우 useState() 위에 구축된 just useReducer() 메서드로 잘 다룹니다. 그러나 useReducer()가 선호되는 경우가 있습니다.

다음 상태는 이전 상태에 따라 다릅니다.

상태가 이전 방법에 종속될 때 항상 이 방법을 사용하는 것이 좋습니다. 보다 예측 가능한 상태 전환을 제공합니다. 간단한 예는 다음과 같습니다.

function reducer(state, action) {
  switch (action.type) {
    case 'ADD': return { count: state.count + 1 };
    case 'SUB': return { count: state.count - 1 };
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'ADD'})}>Add</button>
      <button onClick={() => dispatch({type: 'SUB'})}>Substract</button>
    </>
  );
}

복잡한 상태 모양

상태가 중첩된 개체 또는 배열과 같은 기본 값 이상으로 구성된 경우. 예를 들어:

const [state, dispatch] = React.useReducer(
  fetchUsersReducer,
  {
    users: [
      { name: 'John', subscribred: false },
      { name: 'Jane', subscribred: true },
    ],
    loading: false,
    error: false,
  },
);

매개변수가 서로 의존하고 모든 로직을 하나의 리듀서로 캡슐화할 수 있기 때문에 이 로컬 상태를 관리하는 것이 더 쉽습니다.

테스트하기 쉬움

리듀서는 순수 함수이며 이는 부작용이 없으며 동일한 인수가 주어지면 동일한 결과를 반환해야 함을 의미합니다. React에 의존하지 않기 때문에 테스트하기가 더 쉽습니다. 카운터 예제에서 리듀서를 가져와 모의 상태로 테스트해 보겠습니다.

test("increments the count by one", () => {
  const newState = reducer({ count: 0 }, { type: "ADD" });
  expect(newState.count).toBe(1)
})

결론

useReducer()는 useState()에 대한 대안으로 상태 관리에 대한 더 많은 제어를 제공하고 테스트를 더 쉽게 만들 수 있습니다. 모든 경우는 useState() 방식으로 할 수 있으니 결론은 본인이 편한 방식을 사용하시고 본인과 동료가 이해하기 쉽도록 하세요.