About
리엑트 프로젝트에서 타입스크립트를 사용하는 방법에 대하여 알아보겠습니다.
1. Javascript의 불편함
자동 완성이 구리다.
코드 편집기를 쓰면 어느정도의 자동완성은 됩니다. 하지만 배열을 파라미터로 받아오는 함수를 만들게 될 때 해당 함수 내부에서는 자동 완성이 안됩니다.
함수 파라미터 타입 체킹 안해준다.
자바스크립트 환경에서는 실행해볼때까지 코드에 오류가 있는지 없는지 알 방법이 없습니다.
리덕스 쓸 때 불편하다.
예를 들어 리덕스를 사용해서, useSeletor를 통해 리덕스 스토어 안에 들어있는 상태를 조회한다고 가정했을때, 상태 안에 어떤 값이 들어잇는지 에디터에서 알 수 없습니다.
컴포넌트에 어떤 props를 넣어야하는지 알 수 없다.
리액트 컴포넌트에서 propTypes라는 것을 사용하면 특정 컴포넌트에서 필요한 props를 지정해서 컴포넌트에서 필요한 props가 없다면 콘솔에 경고를 출력하도록 할 수 있습니다. 하지만 이는 매우 번거롭습니다. 그리고 propTypes를 설정해도 props를 빠뜨리면 브라우저 단에서만 경고를 보여줄 뿐 에디터에서는 아무 경고도 보여주지 않기 때문에 실제로 코드를 실행해봐야만 우리가 실수를 했는지 안했는지 알 수 있습니다.
2. 써야 하는 이유
IDE를 더운 적극적으로 활욜 할 수 있습니다.
자동완성 밑 타입 체킹이 되기 때문에 개발 생산성이 정말 높아집니다. 어떤 컴포넌트를 사용하거나, 함수를 사용 할 때 해당 파일을 직접 열어보지 않고도 어떤 props 또는 파라미터를 넣어줘야 하는지 알 수 있습니다.
실수를 줄일 수 있다.
TypeScript를 사용하면 이런 실수들을 코드를 실행해보기 전에도 에디터 단에서 바로 알 수 있기 때문에 실수를 많이 줄일 수 있습니다.
협업 할 떄 유용하다.
IDE에서 컴포넌트, 함수 등을 사용 할 때 어떤 값을 어떤 타입으로 넣어야 하는지 바로 IDE 상에서 확인 할 수 있기 때문에 구지 주석으로 작성하거나, 코드를 읽어보지 않아도 쉽게 사용할 수 있습니다.