TypeScript 3.7 Optional Chaining 도입 후기

배경

레거시 API 응답 처리 코드에서 중첩된 객체 접근 시 null 체크가 과도하게 많았다. 특히 사용자 프로필 데이터를 다루는 부분에서 코드 가독성이 떨어져 리팩토링이 필요했다.

기존 코드

const userName = user && user.profile && user.profile.name || 'Unknown';
const zipCode = user && user.address && user.address.details && user.address.details.zipCode;

이런 패턴이 컴포넌트 전반에 퍼져있었다.

Optional Chaining 적용

TypeScript 3.7로 업그레이드하고 Optional Chaining(?.)을 도입했다.

const userName = user?.profile?.name ?? 'Unknown';
const zipCode = user?.address?.details?.zipCode;

훨씬 간결해졌다. Nullish Coalescing(??)도 함께 사용하니 기본값 처리도 명확해졌다.

실제 효과

• 프로필 관련 코드 약 200줄 정도가 줄었다
• 조건부 렌더링 로직이 명확해졌다
• 타입 가드 코드가 줄어들면서 비즈니스 로직에 집중할 수 있게 되었다

주의사항

Babel 7.8+ 필요하고, target ES2015 이상으로 설정해야 한다. 일부 레거시 브라우저 지원이 필요하다면 폴리필 확인이 필요하다.

배포 전 QA에서 기존 null 체크 로직과 동작이 다른 케이스가 없는지 확인했고, 특별한 이슈는 없었다.