[타입스크립트] 리액트에서 타입스크립트를 사용하는 방법

리액트에서 타입스크립트를 사용하는 방법을 알아보기 전에, 

타입스크립트에 대한 간략한 요약을 먼저하고 지나가겠다. 

타입스크립트는 변수, 함수를 만들 때 타입을 지정해주는 것이다. 

그게 끝이다. 

 

그럼, 이제부터 리액트에서 타입스크립트를 설치하는 방법부터 알아보겠다. 

npx create-react-app 프로젝트명 --template typescript

이런 명령어로 설치를 진행하면, 타입스크립트가 적용된 리액트 버전이 설치된다. 

 

만약 기존에 사용중인 리액트 앱에서 타입스크립트를 사용하고 싶다면, 

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

위 코드를 통해서 타입스크립트를 설치하면 된다. 

---

께알상식+

위 사진에서 타입스크립트가 적용된 파일들을 보면,

jsx라는 확장자가 있다. 여기서 jsx문법을 쓰는 파일은 tsx로 저장하고, 

일반적으로 ts로 저장하면 타입스크립트라고 생각하면 된다. 

만일 타입스크립트에 대한 세부적인 설정을 하고 싶다면, config에서 하면 된다. 

---

jsx를 위한 타입지정 : 

let 박스 :JSX.Element = <div></div>
let 버튼 :JSX.Element = <button></button>

박스라는 변수에 JSX.Element라는 타입을 선언해준다. 그러면 JSX.Element에 해당하는 태그들을 사용하도록 제한하겠다는 것이다. 이제 이 변수에 다른 타입은 올 수 없다. 

 

let 박스 :JSX.IntrinsicElements['div'] = React.createElement('div');
let 버튼 :JSX.IntrinsicElements['button'] = <button></button>;

intrinsicElement라는 타입이 있다. 이것이 무엇이냐 하면, html태그의 종류는 한 100여 가지 정도되는데, 그것들을 모아놓은 타입이다. 저렇게 괄호를 열어서 해당 태그를 타입으로 지정할 수 있다. 기본태그들 사용할 때, 인트린식 엘리먼트를 사용한다고 생각하면 된다. 

---

컴포넌트를 만들 때 타입을 지정하는 방법 :

우리가 함수의 타입을 지정하려고 할 때, 두군데만 신경쓰면 된다. 파라미터와 리턴의 타입이다.

컴포넌트의 타입도 마찬가지인데, 먼저 컴포넌트의 리턴 타입부터 생각해보면, 

리액트의 경우 컴포넌트는 무조건 JSX.Element를 반환한다. 

컴포넌트가 123을 반환한다면, 그건 잘못된 현상이다. 그렇기 때문에 JSX.Element라고 타입을 지정해주면 된다. 

function App (): JSX.Element {
  return (
    <div>안녕하세요</div>
  )
}

---

컴포넌트 props의 타입을 지정해주기 : 

함수를 지정할 때, 주의해야할 두가지는 파라미터와 리턴. 

위에서 컴포넌트의 리턴타입을 생각해보았으니, 이번에는 컴포넌트의 파라미터, props의 타입을 지정하는 방법을 알아보자. 

function App(){
return(
<div>
<h4>안녕하십니까</h4>
<Profile name="철수" age="20"></Profile>
</div>
)
}

function Profile(props: {name: string, age: string}) : JSX.Element {
return(
<div>{props.name}입니다</div>
)
}

크게 다른 내용은 없다. props의 값들이 객체의 형식으로 들어오게 될텐데, 그녀석들의 타입을 파라미터에서 지정해주면 된다. 

---

useState의 타입을 지정해보기 :

 const [user, setUser] = useState<string | null>('kim');

이것도 크게 어려울 내용이 없다. generic문법을 활용해서 state의 타입을 지정해주면 된다.