React-Query 예제로 알아보는 Typescript 타입 가드 활용법

문제

react-query의 useQuery 훅을 사용하여 데이터를 조회하는 상황이다.
아래 첫번째 사진처럼 industryList의 data response 타입을 보장해주기 위해 isError와 isLoading로 삼항연산자를 평가하였다.

이상하게 두번째 사진에선 isError와 isLoading를 변수로 두고 평가하면 useQuery의 data가 undefined로 나온다..
왜 첫번째 사진은 되고 두번째 사진은 타입에러가 뜨는것일까?

원인

이는 타입가드와 관련이 있었다. 변수로 평가한 경우 변수 isTrue의 값이 컴포넌트 내부 어디서든 변경이 될 수 있다고 typescript가 판단하기 때문에 첫번째 사진과 같은 타입 가드 기능을 제공하지 않았던 것이다.
다시 말해서, typescript 입장에서 보면 항상 isTrue의 값이 항상 일정하다고 보장할 수 없기 때문에 분기를 나눈 경우에는 안전한 타입 검사를 위해 industryList가 여전히 undefined 일 수 있다고 판단한 것이다.

const { data, isLoading, isError } = useQuery();
const isTrueDefinitly = isLoading || isError;

...
return (
  {isTrueDefinitly ? (
    <Skeleton />
  ) : (
    <Text>{data.value} />
  )}
)

좀 더 알아보기

아래와 같은 코드가 있다고 가정했을 때 creator는 nullable 하다.
위에서 본 것 처럼 중간에 변경될 여지가 있기 때문이다. 그럼 어떻게 하면 typescript 컴파일러가 isCreator가 non nullable 하다는 것으로 인식할 수 있을까?

const isCreator = data.user.creator !== null;

if (isCreator) {
  const creator = data.user.creator; // nullable
}

아래와 같은 형식으로 null 체크를 직접적으로 보장받아서 non nullable 타입으로 인식하게 하면 된다.

if (data.user.creator !== null) {
  const creator = data.user.creator; // non nullable
}

또는 //////////////////////////////////////////////////

const creator = data.user.creator;
const isCreator = creator !== null

if (isCreator !== null) {
  const imCreator = creator; // non nullable
}

하지만 매번 이렇게 검사하기 싫을 것이다. 이럴때 타입가드를 통해 재사용할 수 있다.

타입가드를 활용한 방법

function isCreatorType(creator: Creator | null): creator is Creator {
  return data.user.creator !== null;
}

if (isCreatorType(data.user.creator)) {
  const creator = data.user.creator; // not nullable
}