Redux 배경 지식이 없기 때문에 이해하는 데 어려움이 있었습니다useReducer. 그래서 제 스스로에게 설명을 해주고자 이 글을 썼는데, 여러분에게도 도움이 되었으면 합니다.

먼저 useState 배우기

useState 작동 방식을 알고 있다면 이 섹션을 건너뛸 수 있으며 useReducer 와 useState 를 비교할 것입니다.

useState 예제( reactjs.org )

  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

const [count, setCount] = useState(0);

useState(0) : 초기 상태(이 경우 0)를 전달하고 count 및 setCount 2개의 요소가 있는 배열을 반환합니다.

count : 새로운 상태

setCount : 상태 값을 변경하는 데 사용하는 함수입니다. 클래스 기반 구성 요소의 this.setState()와 같습니다.

useReducer와 비교

useReducer 복잡한 state 상황에 사용됩니다.
예를 들어 카운터를 줄이기 위해 버튼을 하나 더 추가하고 싶습니다.

다음은 useState를 사용한 코드입니다.

useState 예제( reactjs.org )

 const [count, setCount] = useState(0);

  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>
        +
      </button>
      <button onClick={() => setCount(count - 1)}>
        -
      </button>
    </div>
  );
}

count+1를 사용하여 count -1와 FUNCTION를 useReducer로 이동할 것입니다.

const [count, setCount] = useReducer(FUNCTION, {count: 0})

useReducer 에서 count 는 state , setCount 는 dispatch , FUNCTION 는 reducer 입니다.

그래서 이렇게 생겼습니다 -

const [state, dispatch] = useReducer(reducer, {count: 0})

MDN은 Array.prototype.reduce()가 무엇인지 아주 잘 설명합니다. useReducer에서 감속기 기능이 무엇인지 이해하는 데 도움이 될 수 있습니다.

다음으로 감속기 함수를 작성하겠습니다.

reducer function 2개의 매개변수를 전달합니다.

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

state : 현재 상태action : 상태를 변경하려면 디스패치 함수를 호출합니다. 이 경우 첫 번째 요소는 type 이며 action.type 를 참조하십시오.

예를 들어, dispatch({type: 'increment'}) 를 호출하면 count 는 + 1이 됩니다.

<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>

전체 코드 -

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, {count: 0});
  return (
      {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

도움이 되기를 바랍니다! ❤️