기존 프로젝트에 TS같은것을 도입하려면 무조건 따라 사용하지말고 이득을 따져보아야 한다.
- 프로젝트 사이즈가 큰가
- 협업시 다른 사람이 짠 코드를 참조할 일이 많은가
- 장기적으로 유지보수에 도움이 되는가
- 추후 팀원이 더 필요해도 인력수급이 쉽게 가능한다
- 팀원들 학습에 필요한 시간과 비용이 적게 드는가
이런 질문을 해보시고 Yes 가 많으면 도입해도 된다.
실은 그냥 쓰는것이 좋다. 요즘은 거의 필수 스택이고
타입스크립트는 애초에 그냥 에디터 부가기능이다.
리액트 프로젝트에 TS를 추가하는 방법을 알아보자.
npx create-react-app 프로젝트명 --template typescript
먼저 터미널을 열어서 위 명령어를 입력한다.
만약 기존 프로젝트에 TS만 더하고 싶다면 기존 프로젝트 경로에서 터미널을 오픈하고
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
이 명령어를 쳐주면 된다 이렇게 하면 .js 파일을 .ts로 바꿔서 사용이 가능하다.
그냥 깔끔하게 새로 프로젝트 만드는것이 안전하다.
나는 새로운 폴더를 만들고 그 안에 위 명령어를 입력하여 프로젝트를 생성했다.
그럼 이렇게 적용된 프로젝트가 생성된다.
리액트에서도 함수나 변수 만들어 사용할때 타입지정이 자유로워진다. TS를 사용하는 이유인것이다.
일반변수,함수만들때 타입 지정을 잘해야한다. 그런데 리액트에서 jsx라는 것들도 변수에 담아서 사용할수 있는데 그 부분에 타입지정은 어떻게 할까?
위에서 박스라는 변수를 생성 하고 div태그를 담아줬다. 해당 html은 변수에 담거나 array/object등에 담는것이 다 가능하다. 왜냐하면 일반 html이 아니라 jsx라는 문법이기 때문에 가능하다.
그래서 위 박스의 타입을 살펴보면 JSX.Element라고 자동으로 부여된걸 확인할수 있다.
그리고 내가 직접 지정을해도 가능하다. 이거 JSX 즉 html 요소 타입을 지정하는 법이다.
Profile이라는 컴포넌트를 만들었는데 해당 컴포넌트에 타입을 지정하는것도 가능하다.
함수 타입지정은 파라미터와 return값에 줄수있다.
위 함수에서는 return타입이 있다. 그래서 아까 배운것 처럼 JSX.Element라는 타입을 지정해준다. 그럼 내가 실수로 html이 아닌 요소를 return하면 에러로 실수를 방지한다.
이런식으로 파라미터문법을 사용하고 그곳에 타입을 지정하는것도 가능하다. 즉 리액트에서도 ts문법을 그대로 사용하면 된다.
props를 잘못 전달해서 에러가 잦으니 props 타입을 잘 지정해두면 에러를 방지할수 있을것이다.
물론 state에도 타입지정이 가능하다. 굳이 지정하지 않는다면 초기값을 보고 자동으로 타입을 지정해준다. 하지만 가끔가다 string 또는 number를 넣고싶다면?
이런식으로 제네릭타입으로 넣어주면 된다. 그럼 user 부분에는 string / number값이 들어간다.
