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 이상 |
'FrontEND > vue' 카테고리의 다른 글
TypeScript에서 객체를 안전하게 초기화하는 방법 (0) | 2025.04.28 |
---|---|
TypeScript에서 옵셔널 파라미터(?), 옵셔널 체이닝(?.), ??, || 정리 (0) | 2025.04.27 |
Pinia 상태 모듈화 – 도메인 별로 관리하는 효율적인 상태 구조 만들기 (0) | 2025.04.25 |
Pinia + Axios로 API 상태관리 연동하기 (0) | 2025.04.24 |
Vue 3에서 Pinia 상태관리 적용 가이드 (0) | 2025.04.23 |