React & Typescript - 시작

create-react-app은 기본적으로 타입스크립트를 지원한다. 그러나 프로젝트를 만들때 명령어가 다르다. 별거 없다. 기존의  npx create-react-app project-name 뒤에 --typescript만 넣어주면 된다.

 

자 이제 typescript를 react에서 사용할 준비가 완료 되었다.

 

이제 vscode로 가서 폴더를 열어보면,

짠 tsx, ts 파일들로 바뀌었다. 자바스크립트를 사용하는 리액트앱에서는 js 파일만을 사용해도 문제가 없었는데, 타입스크립트를 사용하는 리액트앱에서는 tsx 파일로 작성을 해야한다.

 

그렇게 만들어본 첫번째 함수형 컴포넌트이다. Greetings는 React.FC (functional Component)라는 타입을 가진 객체이고, 이 객체에 들어가는 것은 GreetingsProps라는 타입이다. 이를 우리는 { name } 이라는 비구조화 할당을 통해 불러오고, 이를 <div> {name} <div> 에 리턴한다.

 

참고로 React.FC라는 타입은 children이라는 속성이 기본적으로 탑재되어있다. 굳이 children을 한번 더 멘션해 주지 않더라도, 비구조화 할당으로 가져오거나, 또는 props.children을 사용하여 가져온다면, 바로 사용할 수 있다.

 

그러나 React.FC는 defaultProps가 제대로 작동하지 않는다. 그래서 React.FC라는 타입을 지우고 사용을 한다면, 오히려 defaultProps가 아주 잘 된다. 이러한 이슈로 인해 React.FC를 쓰지 말라는 팁도 존재한다. 따라서, React.FC의 사용을 권장하지 않는다. children을 가져오는 것이 문제라면 그냥 코드 몇줄 더 적어주자. 어떻게 가져오냐 하면, GreetingsProps에서, 이런식으로 적어주고 가져와주면 된다.

children이 들어올지 말지 모르기 때문에, 뒤에 물음표를 적어주었다.

아주 잘된다.

만약 함수타입을 넣어주고 싶다면, 이런식으로 하면 된다.

onClick이라는 함수는 name이라는 파라미터를 가져와 void의 출력을 하는 (아무것도 리턴하지 않는) 함수이다. 이를 handleClick 이라는 객체에 넣어주고, 이를 다시 onClick에 넣어준다.

그 후 이런식으로 설정해 주었다. 아주 작동이 잘된다.