리액트의 SetStateAction과 Dispatch 타입

[justhighway]

Dialog 컴포넌트와 BottomSheet 컴포넌트를 구현하면서 SetStateAction과 Dispatch라는 리액트 타입이 있다는 것을 알게 되었습니다. 간단하게 어떻게 생겼는지, 어떻게 사용하는지 정리해보겠습니다.

1. useState의 setter부터 까보기

const [state, setState] = useState();

useState보일러 플레이트에서 setter 함수(setState)의 내부 타입을 들여보면 다음과 같이 생겼습니다.

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

복잡합니다. 하나씩 살펴보겠습니다.

2. SetStateAction

위 useState의 타입 정의에 있는 SetStateAction<S> 타입을 또 한 번 보면 다음과 같이 정의되어 있습니다.

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

S라는 이름의 제네릭 타입을 받아서, 이 타입의 값을 직접 전달하거나,
또는 이전 상태(prevState)를 받아서 새 상태를 계산하는 함수로 전달할 수 있도록 만든 타입입니다.

예를 들어 number 타입의 상태가 있다고 하면 :

const [state, setState] = useState<number>(0);

이때 setState는 SetStateAction<S> 타입 정의에 의해 아래의 두 코드 모두 허용합니다.

setState(1);                                // 값을 직접 넣는 경우
setState(prev => prev + 1);      // 콜백 함수를 통해 이전 값을 기반으로 계산하는 경우

즉, SetStateAction<number>는 다음과 같은 의미입니다.

type SetStateAction<number> = number | ((prev: number) => number);

3. Dispatch

Dispatch 타입은 다음과 같이 정의되어 있습니다.

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

A라는 제네릭 타입의 값을 받아 실행하는 함수 타입입니다.
useState의 타입에서 보면, 이 Dispatch의 인자로 SetStateAction<S>타입이 들어가죠.

결과적으로 setState의 전체 타입은 다음과 같은 형태가 됩니다.

setState: Dispatch<SetStateAction<S>>

이걸 더 풀어서 쓰면 다음과 같은 함수 타입입니다.

setState: (value: S | ((prevState: S) => S)) => void;

4. useState의 전체 타입 다시 보기

이제 다시 useState의 전체 타입을 봅시다.

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

기본적으로 함수 타입으로 선언이 되어 있네요,
인자로 받는 initialState는 useState의 state로 들어가는 기본 값 또는 기본 값을 리턴하는 함수입니다.

이후 반환 값으로는 그 초기 값(initialState)과 상태 변경 함수가 들어갑니다. ([상태값, 상태 변경 함수])
이게 즉, 우리가 구조 분해 할당해서 사용하는 const [state, setState] = useState(initialState) 형태입니다.

여기서 상태 변경 함수는 Dispatch<SetStateAction<S>> 타입으로 정의되어 있는데,
위에서 살펴봤듯 이 타입의 의미는 "값을 넣거나, 이전 상태 기반 함수를 넣는 걸 모두 허용한다" 입니다.

5. 실제 적용 예제

현재 BottomSheet 컴포넌트의 context value 타입은 다음과 같이 정의되어 있습니다.

interface BottomSheetContextType {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  currentStep: number;
  setCurrentStep: Dispatch<SetStateAction<number>>;
  goBack: () => void;
}

여기서 4번째 프로퍼티인 setCurrentStep에 Dispatch<SetStateAction<number>>을 사용했습니다.
이렇게 하면 단순 함수 타입보다 useState의 setter를 쓸 것임을 명확히 표현할 수 있고,
타입 안정성도 높일 수 있습니다.

5. 정리

• SetStateAction<S> : 상태 값을 직접 넣거나, 이전 상태(prevState)를 받아 새 상태를 계산하는 함수
• Dispatch<A> : 인자로 값을 받아서 실행하는 함수
• Dispatch<SetStateAction<T>>: useState의 setter 함수의 타입

리액트를 쓰면서 setter 함수에 값을 바로 넣거나 (prev) => ... 형태로 넣는 게 익숙했는데,
그 동작을 가능하게 하는 타입이 SetStateAtcion이고,
그걸 감싸서 실행하는 함수 타입이 Dispatch였다는 걸 알게 되었습니다.

이후 상태 관리에서 타입이 헷갈릴 때 SetStateAction과 Dispatch를 먼저 떠올려볼 수 있을 거 같습니다.