Dispatch<SetStateAction<S>>

React의 Dispatch 타입

Dispatch<A>타입의 역할은 React에서 A 타입의 값을 받아서 처리하는 함수의 타입을 정의합니다.
Dispatch 타입은 주어진 타입 A를 매개변수로 받아서 void를 반환하는 함수의 시그니처를 명시합니다.
함수가 특정 타입의 값을 받아서 실행하는 함수 타입을 나타냅니다.

type Dispatch<A> = (value: A) => void;

여기서 A는 이 함수가 받아서 처리할 값의 타입입니다.
이 타입을 사용하면 함수가 어떤 타입의 값을 받아야 하는지 명확하게 정의할 수 있습니다.

SetStateAction 타입

SetStateAction 타입은 상태를 업데이트하는 방법을 정의합니다.
상태를 업데이트하는 두 가지 방법이 있습니다:

1. 새로운 상태 값을 직접 제공하는 방법
2. 현재 상태를 기반으로 새로운 상태를 계산하는 함수 제공하는 방법

type SetStateAction<S> = S | ((prevState: S) => S);

여기서 S는 상태의 타입입니다.
예를 들어, 상태가 숫자라면 S는 number가 됩니다.

SetStateAction<number>는 숫자이거나 숫자를 반환하는 함수일 수 있습니다.

Dispatch<SetStateAction<S>> 타입

Dispatch<SetStateAction<S>> 타입은 SetStateAction을 인자로 받아서 실행되는 함수의 타입입니다.
React의 useState 훅이 반환하는 setState 함수가 바로 이 타입입니다.

예를 들어 useState를 사용하여 상태를 정의할 때, setState 함수의 매개변수를 보면:

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

setCount(1);
// 특정 값 또는 콜백 함수
setCount((prevState) => prevState + 1);

여기서 setCount의 타입은 Dispatch<SetStateAction<number>>입니다.
즉, setCount는 다음과 같은 함수라는 의미입니다:

type SetStateAction<number> = number | ((prevState: number) => number);
type Dispatch<SetStateAction<number>> = (value: number | ((prevState: number) => number)) => void;

예시

import React, { useState, Dispatch, SetStateAction } from 'react';

const CounterComponent: React.FC = () => {
  const [count, setCount]: [number, Dispatch<SetStateAction<number>>] = useState(0);
  
  // 상태를 새로운 값으로 설정하는 함수
  const increment = () => {
    setCount(prevCount => prevCount + 1); 
    // (prevState: number) => number 타입의 함수가 전달됨
    // 이 함수는 이전 상태 (prevState)를 받아서 새로운 상태 (prevState + 1)를 반환함
    // Dispatch 타입은 setCount가 이 함수를 받는다는 것을 정의합니다.
  };

  // 상태를 특정 값으로 설정하는 함수
  const reset = () => {
    setCount(0); 
    // number 타입의 값 (0)이 전달됨
    // 이 값은 새로운 상태로 설정됨
    // Dispatch 타입은 setCount가 이 숫자 값을 받을 수 있음을 정의합니다.
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CounterComponent;