[ReactLog] 타입을 정의했는데도 예외처리를 또 해야 하는 이유는?

TypeScript에서 이미 모든 필드에 ?를 붙여 선택적으로 정의하고, 타입도 잘 만들어뒀는데 왜 다시 컴포넌트에서 ?., || 같은 예외처리를 해야 할까요?

예:

playlist.images?.[0]?.url || ""
playlist.name || "No name"
playlist.owner?.display_name || "Unknown"

🤔 이미 타입으로 막아놨잖아?

맞습니다. 예를 들어 다음과 같이 타입을 정의했다고 가정하죠:

export interface SimplifiedPlaylist {
  images?: Images[];
  name?: string;
  owner?: Owner;
}

이는 개발 시점에 TypeScript가 “이 값은 있을 수도, 없을 수도 있어요”라고 알려주는 힌트입니다.
즉, 타입 안전성(Type Safety)을 확보한 것이죠.

---

❗️하지만 실행(runtime)은 다르다

서버에서 내려주는 데이터가 진짜로 undefined거나 null, 또는 []일 수 있습니다.
그런 경우에:

• playlist.images[0].url → ❌ TypeError (Cannot read properties of undefined)
• playlist.owner.display_name → ❌ Cannot read property of undefined

이런 에러는 사용자에게 흰 화면, 앱 크래시로 이어질 수 있기 때문에 반드시 런타임 예외처리가 필요합니다.

---

✅ 그래서 타입 + 예외처리 둘 다 필요하다

구분	역할
타입 정의	개발자에게 힌트를 주고 IDE 자동완성, 타입 오류 방지
예외처리 (?., `

---

🧠 마무리 요약

타입은 "그럴 수 있다"는 걸 알려주고,
예외처리는 "진짜 그랬을 때 안 망치게" 도와준다.

실전 서비스에서는 항상 두 가지를 함께 써야 앱이 안정적으로 동작합니다.