useReducer React hook이 유용한 지, 어떻게 사용하는지 알아보십시오!

React는 후크를 소개 한 이래로 여러 프로젝트에서 함께 작업했으며 그저 훌륭합니다.

모든 클래스 기반 구성 요소를 제거하면 코드가 훨씬 더 "실제"JavaScript를 느끼게 됩니다. 

그리고 기능적 구성 요소는 마침내 상태를 관리 할 수 ​​있습니다.

처음으로 React hooks 소개를 확인해보십시오.

가끔 사용하는 하나의 훅은 useReducer입니다.

import React, { useReducer } from 'react'

이 후크는 상태를 관리하는 데 사용됩니다. 좀 더 복잡한 것을 제외하고는 useState와 비슷합니다.

useState와 useReducer의 주요 차이점은 useReducer와 함께 상태가 업데이터 기능을 호출하는 대신 메시지를 전달하여 변경된다는 것입니다.

Redux가 어떻게 작동하는지 알면 기본적으로 같습니다. 감속기는 이전 상태와 전달 된 동작을 기반으로 다음 상태를 계산하는 순수한 함수입니다.

(currentState, action) => newState

"순수한 기능"이란 무엇을 의미합니까? 순수한 함수는 입력을 취하고 입력이나 다른 것을 변경하지 않고 출력을 반환합니다. 이는 감속기가 완전히 새로운 상태를 반환한다는 것을 의미합니다.

감속기는 다음을 수행해야 합니다.

• 그 매개변수를 돌이키지 말라.
• 부작용을 생성하지 않습니다 (아무 것도 변경하지 않는 API 호출).
• 비 순수 함수, 입력 이외의 요소 (예 : Date.now() 또는 Math.random())를 기반으로 출력을 변경하는 함수를 호출하지 마십시오.

보강은 없지만 규칙에 충실해야 합니다. 그리고 이것은 좋은 이점을 가지고 있습니다 : reducers는 부작용이 없으므로 테스트하는 것이 훨씬 간단합니다.

이렇게 하면 상태 관리를 중앙 집중화 할 수 있으므로 구성 요소가 메시지를 보내 구성 요소를 수정할 수 있으며 구성 요소에서 더 복잡한 상태를 사용할 수 있습니다.

카운터 구성 요소와 함께 예를 들어 봅시다.

useReducer는 감속기 함수 및 초기 상태 값을 인수로 허용합니다. 이 경우 우리 상태는 0부터 시작하는 정수입니다.

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, 0)
}

감속기는 위에서 설명한 대로 현재 상태와 동작을 취하는 함수로 원하는 유형의 값일 수 있습니다. 이 경우 문자열입니다.

const reducer = (state, action) => {
  switch (action) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      throw new Error()
  }
}

우리는 또한 컴포넌트 출력을 JSX로 만들어서 이 간단한 앱이 작동하도록 합니다.

const Counter = () => {
  const [count, dispatch] = useReducer(reducer, 0)
  return (
    <>
      Counter: {count}
      <button onClick={() => dispatch('INCREMENT')}>+</button>
      <button onClick={() => dispatch('DECREMENT')}>-</button>
    </>
  )
}

이제 이 상태가 많은 속성을 가진 개체가 될 수 있고 다른 작업이 한 번에 하나의 속성 만 변경한다고 가정합니다. 이 훅에 대한 유용한 사용 사례입니다.