TypeScript 옵셔널 체이닝(Optional Chaining)을 사용하는 이유와 사용 방법

JavaScript와 TypeScript에서 가장 흔하게 겪는 오류 중 하나는
"Cannot read properties of undefined" 에러입니다.
특히 비동기 통신이나 복잡한 객체 구조에서 이런 일이 자주 발생합니다.
이럴 때 사용하는 것이 바로 "옵셔널 체이닝(?.)"입니다.

---

✅ 옵셔널 체이닝이란?

옵셔널 체이닝(Optional Chaining)은
객체나 배열의 특정 속성에 접근할 때, 중간 값이 null이나 undefined여도 에러 없이 안전하게 접근할 수 있도록 도와주는 문법입니다.

const name = user?.profile?.name

 

위 코드의 의미는:

user가 있고 → profile이 있고 → name이 있으면 → 그 값을 가져와
그 중 하나라도 없으면 undefined를 반환해

---

💥 왜 필요한가요?

전통적인 방식 (옵셔널 체이닝 없을 때)

let name
if (user && user.profile && user.profile.name) {
  name = user.profile.name
}

옵셔널 체이닝 도입 후

const name = user?.profile?.name

더 짧고, 더 읽기 쉽고, 더 안전합니다!

---

📌 언제 쓰면 좋을까?

• API 응답이 아직 오지 않았을 때
• 로그인하지 않아 user 정보가 없을 때
• 깊은 객체 구조에서 중간 값이 null일 수 있을 때
• 프론트엔드에서 백엔드 데이터 구조가 확정적이지 않을 때

---

🔍 실제 사용 예제

type User = {
  id: number
  profile?: {
    nickname?: string
  }
}

const user: User = {
  id: 1,
  // profile이 없을 수도 있음
}

const nickname = user.profile?.nickname || '게스트'
console.log(nickname) // '게스트'

위 예제에서 profile이 없기 때문에 nickname에 바로 접근하면 에러지만,
user.profile?.nickname을 사용하면 안전하게 '게스트'가 출력됩니다.

---

🧠 옵셔널 체이닝 + nullish 병합 연산자(??)

const nickname = user.profile?.nickname ?? '기본값'

이렇게 쓰면 null이나 undefined일 때만 '기본값'이 적용됩니다.
(빈 문자열이나 0은 유지됨)

---

⛔ 주의할 점

• 옵셔널 체이닝은 읽기 전용입니다.
  즉, 이런 식으로는 ❌ 쓸 수 없습니다:

user?.profile?.nickname = '홍길동' // ❌ 에러

• TypeScript 3.7 이상에서 지원됩니다.

---

✅ 요약

항목	설명
문법	obj?.prop, obj?.[key], func?.()
장점	코드 간결성, 에러 방지, 안전한 접근
함께 쓰면 좋은 문법	?? (nullish 병합 연산자)
사용 조건	TypeScript 3.7 이상