본문 바로가기
Coding/typescript

React - Typescript + Hook(1)

by z쿳쿳z 2020. 10. 7.
728x90
반응형

TypeScript 설명

 - 흔히 TypeScript를 JavaScript의 superset이라고 많이 부른다. JavaScript의 모든기능을 다 가지고 있고, 거기에 추가적인 기능들이 있기 때문이다. 물론 다른 추가적은 기능도 많겠지만, TypeScript를 사용하는 대표적인 추가적인 기능이 변수를 정적인 상태로 만들어서 사용한다. 기존 JavaScript는 변수를 특정한 형태를 지정하지 않고 사용 했지만, TypeScript는 변수를의 형태를 정해놓고 사용한다.

 - 정적인 타입으로 인해 JavaScript의 단점을 극복하고, 사전에 오류를 해결 해준다는 장점을 가지고 있다.

 

React - TypeScript 기본셋팅하기

 - React로 프로젝트를 시작할 때, 

create-react-app 폴더명

많이 사용하지만 TypeScript를 적용할 때, 

create-react-app 폴더명 --template typescript

해주면 이전에 했던 것처럼 React 프로젝트가 만들어지고, 기존에 jsx 파일의 확장자 들이 tsx로 바뀐것을 확인 할 수 있다.

필요없는 것들을 삭제하고 필요 백지화를 시켜주면...

그리고 npm start를 하면 백지화된 화면을 볼 수 있다. 여기에 App.tsx에서 Hello world를 찍어보면

초기셋팅 완료!

 

#React#typescript#hook#초기셋팅

728x90
반응형

'Coding > typescript' 카테고리의 다른 글

React - Typescript + Hook (4)  (0) 2020.10.29
React - TypeScript + Hook(3)  (0) 2020.10.28
React - TypeScript + Hook(2)  (0) 2020.10.27
React - TypeScript + Hook  (0) 2020.10.06