TypeScript 기초

7주차까지는 JavaScript와 JSX를 사용해 React 애플리케이션을 개발했습니다. 코드가 동작하고 화면이 잘 나오면 문제없어 보이지만, 프로젝트가 커지고 협업 인원이 늘어나면 예상치 못한 문제가 발생합니다. 함수에 어떤 인자를 넘겨야 하는지, 컴포넌트가 어떤 props를 받는지, API 응답 데이터의 구조가 무엇인지 코드만 봐서는 파악하기 어려워집니다. 잘못된 타입의 값을 전달해도 실행 전까지는 오류를 알 수 없고, 런타임에 가서야 "undefined is not a function" 같은 에러를 마주하게 됩니다.

8주차에서는 TypeScript를 도입해 이런 문제를 해결합니다. 모든 .jsx 파일을 .tsx로, .js 파일을 .ts로 변환하고, 데이터 구조와 함수 시그니처에 타입을 명시합니다. 컴포넌트의 props에 interface를 정의하고, 상태의 타입을 지정하며, 이벤트 핸들러의 매개변수 타입을 명확히 합니다. 코드를 작성하는 시점에 편집기가 타입 오류를 알려주고, 자동 완성으로 어떤 속성을 사용할 수 있는지 바로 확인할 수 있게 됩니다.

이 과정을 통해 "왜 실무에서 TypeScript를 사용하는지"를 직접 체감하게 됩니다. 타입을 명시하는 것이 처음에는 번거롭게 느껴질 수 있지만, 코드의 의도가 명확해지고, 리팩토링이 안전해지며, 협업 시 커뮤니케이션 비용이 줄어드는 효과를 경험하는 것이 이번 미션의 목표입니다.