안녕하세요. 지난 게시물에서 반응에 대해 다루었던 useCallback, 이제 놀라운 React 팀이 제공한 마지막 후크인 useReducer를 살펴보겠습니다.

useReducer 후크는 무엇입니까?

후크가 무엇인지 계속 설명하기 전에 한 걸음 물러서서 리듀서가 무엇인지 살펴보겠습니다.

감속기 란 무엇입니까?

redux에 익숙하다면 감속기 기능이 무엇인지 알 것입니다.

리듀서는 상태와 액션을 인자로 받고 그 결과 새로운 상태를 반환합니다. 감속기의 일반적인 예는 다음과 같습니다.

const initialState = {
    loading: false,
    error: false,
    names: [],
};

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case "loading":
      return { ...state, loading: true };
    case "error":
      return { ...state, error: true, loading: false };
    case "success":
      return { ...state, names: action.payload };
    default:
      return state;
  }
}

여기서 무슨 일이 일어나고 있습니까?
위의 함수는 유형을 확인하고 전달된 유형에 따라 상태를 반환합니다.

사용으로 돌아가기

useReducer 후크는 useState 후크와 매우 유사합니다. 상태가 변경될 때마다 상태를 관리하고 구성 요소를 다시 렌더링할 수 있습니다. 위의 예와 같이 리듀서 및 초기 상태를 수락하고 새 버전의 상태를 반환합니다. 감속기에서 수행되는 작업을 기반으로 하는 디스패치 방법입니다.

다음은 사용 방법의 예입니다.

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

후크는 또한 상태를 느리게 초기화하거나 상태를 초기 상태로 다시 재설정하는 세 번째 인수를 사용합니다. 지연 초기화에 대한 자세한 내용은 react documentation에서 확인할 수 있습니다.

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

왜 이것을 사용해야합니까?

useReducer 후크는 복잡한 상태가 있거나 초기 상태가 다른 상태에 종속된 경우에 자주 사용됩니다.

이를 더 잘 이해하려면 몇 가지 조치가 필요합니다.

예

useState를 사용하는 카운터를 살펴보겠습니다.

const [num1, setNum1] = useState(0);

  const decrement = () => {
    setNum1((prev) => prev - 1);
  };
  const increment = () => {
    setNum1((prev) => prev + 1);
  };

  return (
    <div className="App">
      Num: {num1}
      <div className="grid">
        <button className="box" onClick={increment}>
          +
        </button>
        {num1 ? (
          <button className="box" onClick={decrement}>
            -
          </button>
        ): (<div />)}
      </div>
    </div>
  );

이제 useReducer를 사용하여 동일한 예를 살펴보겠습니다.

import { useReducer } from "react";
const initialState = { num: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { num: state.num + 1 };
    case "decrement":
      return { num: state.num - 1 };
    default:
      throw new Error();
  }
}
export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div className="App">
      <div>Num: {state.num}</div>
      <div className="grid">
        <button className="box" onClick={() => dispatch({ type: "increment" })}>
          +
        </button>
        {state.num ? (
          <button className="box" onClick={decrement}>
            -
          </button>
        ): (<div />)}
      </div>
    </div>
  );
}

리듀서 함수에서 유형을 사용하여 상태에서 수행할 작업을 결정합니다.

예를 들어 계산기를 만드는 경우 이 방법이 더 좋습니다.

결론

useState 후크를 사용할지 useReducer를 사용할지에 대해 많은 논쟁이 있었습니다. 실제로 수행하는 작업에 따라 다르지만 Kent C. Dodds는 매우detailed examples on when to use either in his post .

읽어주셔서 감사합니다. 다음 게시물에서는 우리만의 반응 후크를 만드는 방법을 살펴보겠습니다.

질문이나 의견이 있으시면 아래 의견에 남겨주세요. 안전을 유지하고 계속 놀라운 모습을 유지하는 것을 잊지 마세요.