TypeScript 날짜 타입 props 문제 진단 순서

TypeScript를 쓸 때 props에 날짜 정보를 전달하면서 타입 에러가 나는 경우가 있다. optional일 수도 있고 null일 수도 있고 실제 값일 수도 있는데, 이 조합이 복잡해지면 빌드가 실패한다.

왜 헷갈리는지 파악하기

먼저 정확히 어떤 상황인지 정의한다. props가 다음 중 어떤 상태여야 하는가:

• 항상 값이 있어야 함
• null일 수 있음
• undefined일 수 있음 (전달하지 않을 수 있음)
• 값이 없을 수도 있음

재현 조건 확인

빌드할 때 정확히 어느 부분에서 에러가 나는지 확인한다.

npm run build
npx tsc --noEmit

두 번째 명령어가 더 자세한 타입 에러를 보여준다.

빌드 에러 메시지 읽기

TypeScript 에러는 정확하다. "Property 'X' is missing", "Type 'Date' is not assignable to type 'string'" 같은 메시지가 나온다. 이 메시지를 읽으면 문제가 뭔지 알 수 있다.

// 예: Date 타입이지만 string이 전달됨
interface Props {
  date: Date;  // Date 타입
}

<MyComponent date={new Date().toISOString()} />  // string 전달 → 에러

optional/null 확인

Props 정의에서 optional(?)과 null의 차이를 명확히 한다.

// 방법 1: optional (전달하지 않을 수 있음)
interface Props {
  date?: Date;
}

// 방법 2: null 가능 (null을 명시적으로 전달)
interface Props {
  date: Date | null;
}

// 방법 3: 둘 다 가능
interface Props {
  date?: Date | null;
}

3번이 가장 유연하지만, 컴포넌트 내부에서 매번 체크해야 한다.

타입 가드로 안전성 보장하n하기

Props가 optional이나 null일 때는 사용하기 전에 확인해야 한다.

function MyComponent({ date }: Props) {
  if (!date) {
    return <div>No date</div>;
  }
  return <div>{date.toLocaleDateString()}</div>;
}

TypeScript가 이 체크를 인식해서 내부에서 date가 Date 타입임을 보장한다.

체크 포인트

1. Props 인터페이스 정의: optional, null 명확히
2. 전달할 때: 올바른 타입 확인
3. 사용할 때: null/undefined 체크
4. 컴파일: tsc --noEmit로 에러 없는지 확인

실행 예시

// Props 정의
interface Props {
  date?: Date | null;
  label?: string;
}

// 사용
function MyComponent({ date, label }: Props) {
  return (
    <div>
      {label && <p>{label}</p>}
      {date ? (
        <p>{date.toLocaleDateString()}</p>
      ) : (
        <p>No date provided</p>
      )}
    </div>
  );
}

타입 정의 재확인

빌드 에러가 계속 나면 타입 정의부터 다시 확인한다. 혹시 Date 대신 string을 써야 하는 건 아닌지, API 응답이 실제로 Date 객체인지 ISO 문자열인지 확인한다.

타입을 명확히 정하고 체크를 빠짐없이 하면 런타임 에러를 예방할 수 있다.