React에 Typescript 적용

타입스크립트?

리액트는 자바스크립트 라이브러리 이다. 타입스크립트는 자바스크립트의 타입을 정의해주어 보다 높은 수준의 코드를 작성할 수 있게 해준다.
나의 경우 타입스크립트를 후에 배웠고 이미 진행 중인 리액트 프로젝트에 추후에 적용하기 위해 리액트에 타입스크립트를 적용하는 방법에 대한 강의 또는 문서를 활용하여 공부하였으며 정리하려고 한다.

초기 세팅

아래와 같이 타입스크립트 필수 패키지를 설치해 준다.
npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom

아래와 같이 확장자 명을 타입스크립트에 맞게 변경해준다.
js -> ts
jsx -> tsx

Props

예시로 컴포넌트를 작성하며 정리해 보았다.
상위 컴포넌트는 UserList, 하위 컴포넌트는 UserItem으로 Props로 user객체를 넘겨줄 것이다.

interface IUser {
  id: number;
  name: string;
  age: number;
  isLoggedIn: boolean;
}

const UserItem = ({ users }: IUser) => {
  //...
}

Props는 하나의 컴포넌트에서 다른 컴포넌트로 전달되는 argument이다.
이 Props는 상위에서 하위로 전달되는데, Props를 받을 때 interface로 타입을 정의해 주어야 한다.

import { IUser } from './UserItem'
import { useParams } from 'react-router-dom'

const UserList = () => {
  const users: IUser[] = axios.get(/*...*/)
  const { day } = userParams<{ day: string }>()
  //...
}

위의 경우 하위에서 Props를 받을 때 interface를 생성한 경우이므로 상위에서 이 interface를 받아서 사용해야 한다.

event

const onSubmit = (e: React.FromEvent) => {
  e.preventDefault
  if(nameRef && ageRef) {
    const name = nameRef
    const age = ageRef
    const values = {
      name,
      age
    }
    submitHandler(values)
  }
}
//...
const nameRef = useRef<HTMLInputElemet>(null)
const ageRef = useRef<HTMLInputElement>(null)
//...
<input ref={nameRef} />
<input ref={ageRef} />

useRef를 사용할 때 타입을 HTMLInputElemet로 정의하였다.
ref가 input 태그를 참조하고 있기 때문이다.
또한 ref가 존재하는지 if문에서 확인하여 주어야 한다.