8장. 리액트 프로젝트에서 타입스크립트 사용하기

8장에서는 리액트 프로젝트에서 타입스크립트를 사용하는 방법에 대하여 알아보도록 하겠습니다.

JavaScript 는 weakly typed 언어이기에, 특정 숫자 변수를 선언한 다음에 변수에 문자열을 넣을 수도 있고, null 을 넣을 수도 있고, 배열을 넣을 수도 있습니다.

let value = 5;
value = '안녕하세요';
value = [1,2,3,4,5];
value = null

추가적으로 자동완성도 우리가 Java / C# / C++ / Python 등의 언어를 사용 할 때처럼 제대로 되지 않습니다. (VSCode 를 사용하면 어느정도 되고 있다고 착각 할 수도 있는데 사실 TypeScript 관련 기능이 이미 기본적으로 돌아가고있어서 되는 거랍니다.) 만약에 TypeScript 를 사용하면, 이러한 불편함을 해결해주어 개발을 훨씬 편하게 해줍니다.

이 튜토리얼에서는, TypeScript 를 맛보기식으로 중요한것들만 조금씩 알아보고, 리액트에서 사용하는 방법을 알아보겠습니다. 이 튜토리얼에서는 TypeScript 에 있는 모든 기능들을 세세하게 다루진 않기 때문에 타입스크립트를 조금 더 제대로 배우고 싶다면 이 링크 (번역본)를 읽어보시는 것을 권장드립니다.

하지만, 꼭 사전에 배우지 않아도 이 튜토리얼을 통하여 리액트에서 충분히 TypeScript 를 활용 할 수 있으실 것 입니다.

만약 TypeScript 를 이미 숙지하시고 계시다면 섹션1. 타입스크립트 연습을 생략하시고 바로 섹션2. 리액트 컴포넌트 타입스크립트로 작성하기를 진행해주세요.

타입스크립트를 사용하는 이유

1. IDE 를 더욱 더 적극적으로 활용 (자동완성, 타입확인)

TypeScript 를 사용하면 자동완성이 굉장히 잘됩니다. 함수를 사용 할 때 해당 함수가 어떤 파라미터를 필요로 하는지, 그리고 어떤 값을 반환하는지 코드를 따로 열어보지 않아도 알 수 있습니다. 추가적으로, 리액트 컴포넌트의 경우 해당 컴포넌트를 사용하게 될 때 props 에는 무엇을 전달해줘야하는지, JSX 를 작성하는 과정에서 바로 알 수 있으며, 컴포넌트 내부에서도 자신의 props 에 어떤 값이 있으며, state 에 어떤 값이 있는지 알 수 있습니다. 또한, 리덕스와 함께 사용하게 될 때에도 스토어 안에 어떤 상태가 들어있는지 바로 조회가 가능해서 굉장히 편리합니다.

2. 실수방지

함수, 컴포넌트 등의 타입 추론이 되다보니, 만약에 우리가 사소한 오타를 만들면 코드를 실행하지 않더라도 IDE 상에서 바로 알 수 있게 됩니다. 그리고, 예를 들어 null 이나 undefined 일 수도 있는 값의 내부 값 혹은 함수를 호출한다면 (예: 배열의 내장함수) 사전에 null 체킹을 하지 않으면 오류를 띄우므로 null 체킹도 확실하게 할 수 있게 됩니다.