리액트에 타입스크립트 적용

리액트에 타입스크립트를 적용해보자.

$ npx create-react-app ts-react-tutorial --typescript

$ npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom

위의 명령어는 리액트 파일 생성시 타입스크립트를 적용하는 거고,
아래 명령어는 이미 생성된 리액트 파일에 타입스크립트를 적용하는 거다.

타입스크립트 확장자는 js -> tx / jsx -> tsx 로 설정한다.

리액트는 jsx를 반환하는 컴포넌트일 때 tsx로, 아니면 ts로 변환한다.

이후 적용방식은 아래 글들을 참고했다.

대부분 interface를 활용해 객체타입을 캡슐화하는데 초점이 맞춰져 있다.

타입스크립트는 확실히 js 나 리액트에서 데이터의 안전성에 많이 활용되는 듯 싶다.

https://react.vlpt.us/using-typescript/02-ts-react-basic.html

2. 리액트 컴포넌트 타입스크립트로 작성하기 · GitBook

https://www.youtube.com/watch?v=g-kauNOTVRY&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=17 

https://kyounghwan01.github.io/blog/TS/React/convert-js-to-ts/

How to Migrate a React App to TypeScript

 

이후 컨포넌트 생성은 아래와 같다.

const App: React.FC = ()=>{
  return (
    <>
    <Header/>
    <Home/>
    <Footer/>
    </>
  );
}

이때 한가지 의문점이 생겼는데 컨포넌트를 선언문으로 생성한다는 점, 그리고 그 안에 들어가는 다른 컨포넌트를 아래 줄에 적어도 호이스팅 된다는 점이었다. (띠용!)

물론 ts를 적용하더라도 얼마든지 표현식으로 할 수 있지만 TDZ(Temporal Dead Zone)를 유의해야 한다.

참고

https://velog.io/@jjunyjjuny/React-%ED%95%A8%EC%88%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%A0%EC%96%B8%EB%AC%B8-vs-%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%80-%EC%B7%A8%ED%96%A5-%EC%B0%A8%EC%9D%B4%EC%9D%BC%EA%B9%8C

[ React ] 함수 컴포넌트, 선언문 vs 표현식은 취향 차이일까?