[2024.06.12] TIL 37일차

useReducer란?

• useReducer는 useState와 같은 상태 관리, 상태 업데이트 훅이다.
• 변경할 값이 많을 때, 즉 상태 관리 할 데이터가 많아질 때 사용을 고민해야 한다.

useReducer 기본 형태

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

• state : 상태 이름 (컴포넌트에서 사용할 상태)
• dispatch : 상태를 변경 시 필요한 정보를 전달하는 함수
• reducer : dispatch를 확인해서 state를 변경해주는 함수
• initialState : state에 전달할 초기 값

<예시 코드>

  import { useReducer } from 'react';

  function reducer(state, action) {
    // ...
  }

  function MyComponent() {
    const [state, dispatch] = useReducer(reducer, { age: 42 });
    // ...

매개변수

1. reducer : reducer 함수는 상태가 업데이트되는 방식을 지정

   • 순수 함수여야 한다
     • 동일 인자에 대해 항상 동일한 결과를 반환해야 함
     • 외부 상태를 변경하거나 부작용을 일으키면 안됨
   • state와 action을 인자로 받아야 한다.
   • 다음 상태를 반환해야 한다.
   • state와 action은 어떤 유형이든 가능하다.

2. initialArg : 초기 상태가 계산되는 값

   • 모든 유형의 값이 될 수 있다.
   • 초기 상태를 계산하는 데 사용된다.
     • 구체적인 계산 방법은 init 인자에 의해 결정됨

3. 선택적 init : 초기 상태를 계산하는 초기화 함수

   • 초기 상태를 반환해야 한다.
   • 사용 방식
     • init 함수가 지정되지 않는 경우, 초기 상태는 initialArg 값으로 설정
     • init 함수가 지정된 경우, 초기 상태는 init(initialArg) 호출 결과로 설정

반환값

• useReducer는 정확히 두 개의 값을 가진 배열을 반환한다.
  • 현재 state, 첫번째 렌더링 중에는 init(initialArg) 또는 initialArg로 설정
  • state를 다른 값으로 업데이트하고 리렌더링을 촉발할 수 있는 dispatch function

주의사항

1. useReducer 호출 위치
   • useReducer는 훅이므로 다음 위치에서만 호출할 수 있다.
     • 컴포넌트의 최상위 레벨
     • 사용자 정의 훅
   • 반복문이나 조건문 내부에서는 useReducer를 호출할 수 없다.
     • 만약 반복문이나 조건문 내부에서 상태를 관리해야 한다면,
       새 컴포넌트를 만들어서 그 안으로 옮겨야 함

2. Strict Mode에서의 동작
   • Strict Mode에서는 React가 의도치 않은 불순물(부작용)을 찾기 위해 reducer와
     초기화 함수를 두 번 호출한다.
     • 이 동작은 개발 모드에서만 발생하며, 상용 환경에서는 발생하지 않음
   • reducer와 초기화 함수가 순수 함수라면, 이 동작이 로직에 영향을 미치지 않는다.
     • 두 번 호출된 결과 중 하나는 무시됨