TypeScript 3.7 Optional Chaining 도입 후기

배경

이번 주 TypeScript를 3.6에서 3.7로 업그레이드했다. 가장 기대했던 기능은 Optional Chaining(?.)과 Nullish Coalescing(??) 연산자였다.

기존 코드에서 API 응답 데이터를 다룰 때 중첩된 객체 접근이 많아서 방어 코드가 지저분했다.

기존 코드

const userName = data && data.user && data.user.profile && data.user.profile.name;
const age = data && data.user && data.user.age !== undefined ? data.user.age : 0;

개선된 코드

const userName = data?.user?.profile?.name;
const age = data?.user?.age ?? 0;

적용 결과

주요 API 클라이언트 코드 약 30개 파일을 리팩토링했다. 코드 라인 수가 약 15% 줄었고, 가독성이 크게 개선됐다.

특히 || 대신 ??를 사용하면서 falsy 값(0, '', false) 처리 버그를 몇 개 발견했다. 기존에는 count || 10 같은 코드에서 count가 0일 때도 10으로 처리되는 문제가 있었다.

// Before: count가 0이면 10으로 처리됨
const displayCount = response.count || 10;

// After: count가 null/undefined일 때만 10으로 처리
const displayCount = response.count ?? 10;

주의사항

Babel 설정도 함께 업데이트해야 한다. @babel/plugin-proposal-optional-chaining과 @babel/plugin-proposal-nullish-coalescing-operator 플러그인을 추가했다.

IE11 지원 프로젝트라 트랜스파일 결과물 크기가 조금 늘어났지만, 개발 경험 개선을 고려하면 충분히 가치 있는 trade-off였다.