Builder.shin

TypeScript 3.7 Optional Chaining 도입 후기

배경

프로젝트에서 TypeScript 3.6을 사용 중이었는데, API 응답 데이터를 다루는 코드에서 null 체크가 과도하게 중첩되는 문제가 있었다. 작년 11월에 나온 TypeScript 3.7의 Optional Chaining이 이 문제를 해결해줄 것 같아 업그레이드를 진행했다.

기존 코드의 문제

const userName = response.data && 
  response.data.user && 
  response.data.user.profile && 
  response.data.user.profile.name;

중첩된 객체에서 값을 안전하게 꺼내려면 매번 이런 식으로 체크해야 했다. 코드가 길어지고 실수하기 쉬웠다.

Optional Chaining 적용

const userName = response.data?.user?.profile?.name;

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

const userName = response.data?.user?.profile?.name ?? 'Anonymous';

마이그레이션 과정

  1. TypeScript 3.7.5로 업그레이드
  2. tsconfig target을 ES2015로 유지 (바벨이 트랜스파일)
  3. 주요 API 호출 부분부터 순차적으로 리팩토링
  4. 약 200여 곳의 null 체크 코드 개선

특히 Redux 액션 크리에이터와 리듀서에서 효과가 컸다. 깊은 state 업데이트 시 안전성도 높아졌다.

주의사항

함수 호출에도 사용 가능하다는 점을 나중에 알았다.

obj.method?.(); // method가 있으면 호출

배열 인덱스 접근도 가능하다.

arr?.[0]?.value

팀원들에게 공유하니 반응이 좋았다. 다만 과도하게 사용하면 에러를 숨길 수 있으니, 실제로 null일 가능성이 있는 곳에만 사용하기로 합의했다.

결론

TypeScript 3.7 업그레이드는 큰 문제 없이 완료됐고, Optional Chaining 덕분에 코드 품질이 개선됐다. null 안전성 관련 버그도 줄어들 것으로 기대한다.

TypeScript 3.7 Optional Chaining 도입 후기