Q8. 조건부 렌더링에서 never 타입 — 어떻게 좁힐까?

크루의 질문

“리액트 자체의 사용에는 어려움은 없었지만 타입을 쓰는 과정에서 에러를 많이 만났습니다. 제일 최근에는 예외 처리를 하는 과정에서 errormode라는 상태를 만들어서 상태에 따라서 에러 메시지를 띄우려고 했는데, 타입을 너무 넓게 잡아버리는 바람에 조건부 렌더링을 걸어서 에러메시지가 있는 span 태그를 렌더링 할 때 never 타입이 뜨는 문제가 있었습니다. 이러한 비슷한 결의 타입 좁히기 문제들을 해결하는 과정에서 제일 시간이 많이 들었습니다.” — 루멘·디움 페어

AS-IS 코드

🔍 읽기 전에

if (!mode) return null 아래에서 mode의 타입은 무엇인가요?

좁힐수록 타입이 어디로 가고 있는지 따라가봅니다.

// 루멘·디움 페어의 시나리오를 재구성한 코드
type ErrorMode = 'cardNumber' | 'expiry' | 'cvc' | null;
type ErrorMessages = {
  cardNumber?: string;
  expiry?: string;
  cvc?: string;
};
 
function ErrorBanner({ mode, messages }: { mode: ErrorMode; messages: ErrorMessages }) {
  // mode가 null이면 렌더할 게 없다
  if (!mode) return null;
 
  // 여기서 mode는 'cardNumber' | 'expiry' | 'cvc'로 좁혀짐.
  // messages[mode]는 string | undefined가 됨 (각 필드가 optional이라서).
  return <span>{messages[mode]}</span>;
}
 
// switch에서 모든 케이스를 처리한 뒤 default 분기 — never의 전형적인 자리
function getLabel(mode: ErrorMode) {
  switch (mode) {
    case 'cardNumber': return '카드 번호';
    case 'expiry':     return '유효기간';
    case 'cvc':        return 'CVC';
    case null:         return null;
    default: {
      // 이 자리에서 mode는 never. 새 union 멤버를 추가했는데
      // 케이스를 빠뜨리면 여기서 컴파일 에러가 나서 누락을 알려준다.
      const _exhaustive: never = mode;
      return _exhaustive;
    }
  }
}

루멘·디움이 만난 never는 보통 두 상황에서 옵니다:

1. 모든 분기를 다 좁힌 뒤 — switch/if로 union의 모든 케이스를 처리한 뒤의 default 분기에서 변수 타입이 never가 됩니다. 이건 버그 신호가 아니라 exhaustiveness check를 위한 의도된 자리입니다.
2. 유니온 정의가 잘못된 채로 좁혀나간 경우 — mode === 'cardNumber' && mode === 'cvc'처럼 동시에 두 값일 수 없는 조건을 만들면 그 분기 안 변수는 never. 조건의 논리나 유니온 정의를 다시 봐야 합니다.

공식문서 단서 — TypeScript Handbook · Narrowing

이 카드는 React 영역이 아닌 TypeScript 영역입니다. 핵심 두 페이지를 봅니다.

TypeScript Handbook — Narrowing

• 원문: typescriptlang.org/docs/handbook/2/narrowing.html 
• 핵심: typeof, instanceof, in, truthiness, equality, type predicate (사용자 정의 가드), discriminated union — 7가지 narrowing 기법. 루멘·디움이 만난 문제는 보통 discriminated union 또는 type predicate로 풀 수 있다.

TypeScript Handbook — The never type

• 원문: typescriptlang.org/docs/handbook/2/narrowing.html#the-never-type 
• 핵심: never는 불가능한 경우를 표현한다. switch에서 모든 케이스를 다룬 뒤의 default 분기, 또는 과도하게 좁힌 변수의 타입. never가 보이면 보통 타입을 좁히는 순서가 잘못되었거나, 유니온 정의를 다시 봐야 한다.

React + TypeScript 공식 문서 — Useful Hooks

• 원문: react.dev/learn/typescript 
• 핵심: useState는 초기값으로 타입을 추론하므로, union state라면 타입 인자를 명시하는 편이 안전하다. 루멘·디움의 errormode 시나리오는 useState<ErrorMode | null>(null)처럼 가능한 상태 전체를 타입에 드러내면 이후 조건부 렌더링에서 좁히기 흐름을 추적하기 쉽다.

선배 PR 읽기 가이드

추가 읽을거리 — Dan Abramov · Kent C. Dodds

연관 PR 더 보기

이 주제는 TS 사용 PR에 한정되어 있어 부록에 별도 매핑되어 있지 않습니다. TypeScript를 사용한 PR들(2022년 이후 대부분)은 부록에서 변경 파일에 .tsx가 보이는 PR을 골라 따라갈 수 있습니다.

루멘·디움 페어가 시간을 가장 많이 쓴 문제가 타입 좁히기였다는 사실 자체가 학습 포인트입니다 — errormode를 별도 state로 두는 결정 자체가 Q5 검증·에러 책임과 만납니다. 한 페어의 페인 포인트가 두 카드의 교집합에서 풀릴 수 있습니다.