`useState` 훅의 반환값에 사용된 타입이 무엇이고, 왜 해당 타입으로 선언했는지 이유를 알려주세요.

[samseburn]

📚 89p - 94p 📌 질문을 다시 적거나 부가적인 내용 추가해주세요!

다음은 리액트의 useState의 함수 시그니처입니다.

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

함수(useState 훅) 반환값에 사용된 타입이 무엇이고 왜 해당 타입으로 선언했는지 이유를 알려주세요.

[hotdog1004]

리액트의 useState 훅 반환값은 튜플 타입이다. 튜플 타입을 통해 배열 원소 자리마다 명확한 의미를 부여하기 때문에 컴포넌트에서 사용하지 않은 값에 접근하는 오류를 방지할 수 있다.

[kwonhygge]

튜플타입이 반환되고 있습니다. 이를 통해 반환된 배열의 각 요소가 무엇을 의미하는지 명확히 알 수 있습니다.

[devsomda]

튜플 타입을 사용해 첫 번째 원소와 두 번째 원소의 타입과 의미가 정확합니다. 이에 따라 사용자는 첫 번째 원소에 값과 두 번째 원소에 변환 함수를 원하는 이름으로 넣어 사용할 수 있습니다.

[limejin]

반환값 [S, Dispatch<SetStateAction<S>>]의 타입은 튜플 타입입니다. 첫번째는 반환값은 초기값을 두번째 반환값은 첫번째 값을 상태를 조작할 수 있는 세터이기 때문에 순서가 지켜지는 것이 중요합니다. 튜플을 사용하면 반환되는 각 값의 타입과 위치가 고정되기 때문에, 사용자가 함수의 반환값을 다룰 때 타입과 순서에 대한 안전성을 보장합니다.

[samseburn]

함수(useState 훅) 반환값에 사용된 타입

튜플 형태로 반환값을 정의하고 있습니다.

해당 타입으로 정의한 이유

훅을 사용할 때 인덱스에 따라 값을 사용하는 형태가 다릅니다. 여기에서 만약 배열 형태로 정의하게 되면, 아래와 같이 유니온 값을 가진 배열로 타입 추론이 됩니다.

(S | Dispatch<SetStateAction<S>>)[]

해당 타입은 훅의 반환값이 적절하지 못한 타입이므로 명시적으로 튜플 타입으로 정의하는 게 필요합니다. 이때 as const를 사용하면 readonly 튜플로 반환해주기도 합니다.