TypeScript - React + Typescipt

TypeScript 대표 이미지

 

🖥️ React와 TypeScript 활용하기

React에 TypeScript를 활용한다면 다음과 같은 이득을 따져봐야 한다.

 

1. 프로젝트 사이즈가 큰가
2. 협업시 다른 사람이 짠 코드를 참조할 일이 많은가
3. 장기적으로 유지보수에 도움이 되는가
4. 나중에 팀원이 더 필요해도 인력수급이 쉽게 가능한가
5. 팀원들 학습에 필요한 시간과 비용이 적게 드는가

TypeScript를 남들이 쓴다고 무조건 적으로 쓰는 행위는 하지말아야 한다.

 

⌨️ React + TypeScript 설치

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

 

TypeScript 셋팅이 완료된 프로젝트를 설치 하는 방법이다. 

 

기존 프로젝트에 TypeScript만 더하고 싶다면 기존 프로젝트 경로에서 다음과 같은 명령어를 입력하면 된다.

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

 

새로 TypeScript가 셋팅이 된 프로젝트를 만들면 다음과 같이 뜰텐데

React + TypeScript 초기화면

 

일반 프로젝트와 다른 점은 컴포넌트 파일은 JS가 아니라 tsx로 확장자를 사용해야한다. 일반 jsx와 큰 다른점이 없지만 함수, 컴포넌트 ,state, props 타입체크를 잘 해줘야 에러가 나지 않는다.

 

그렇다면 에러체크 하는 법에 대해서 알아보자.

 

1. 일반 변수, 함수 타입 지정

2024.02.23 - [👨‍💻 TypeScript] - TypeScript 기본 타입 정리(primitive types)

 

일반 변수, 함수 타입 지정은 위 글을 보면 정리 되어 있다.

 

2. JSX 타입 지정

리액트에선 변수나 자료에 <div></div>를 담아서 쓸 수 있다. 왜냐하면 리액트는 HTML이 아니라 JSX라 부르는 자료기 때문이다.

이 자료에 타입을 지정하고 싶다면 JSX.Element라는 타입을 쓰면 된다.

let box :JSX.Element = <div></div>
let button :JSX.Element = <button></button>

 

3. function component 타입지정

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

 

컴포넌트가 하나 있다 컴포넌트는 함수이기 때문에 파라미터와 return 값이 존재 한다. 그렇기 때문에 파라미터와 return에 타입을 지정해줘야 한다. 

파라미터는 항상 props이기 때문에 props에 맞게 타입을 지정하면 된다.

 

type AppProps = {
  name: string;
}; 

function App (props: AppProps) :JSX.Element {
  return (
    <div>{message}</div>
  )
}

 

props 파라미터는 알맞게 타입지정해주면 되고 컴포넌트는 return으로 JSX를 반환해 JSX.Element로 타입을 지정해주면 된다. JSX.Element는 생략해도 자동으로 타입이 지정된다.

 

참고로 props로 JSX를 입력할 수 있게 코드를 짜는 경우도 있다.

 

<Container a={<h4>안녕</h4>} />

function Container (props) {
  return (
    <div>{props.a}</div>
  )
}

 

이럴 땐 JSX.IntrinsicElements라는 이름의 타입을 사용가능하다.

 

type ContainerProps = {
  a: JSX.IntrinsicElements['h4'];
}; 

function Container (props: ContainerProps) {
  return (
    <div>{props.a}</div>
  )
}

 

4. state 문법 사용 시 타입지정

state를 만들 때 자동으로 타입이 할당이 되지만 미리 타입을 지정해놓으면 좋다.

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

 

Generic 문법을 이용해서 타입을 useState함수에 집어넣는 식으로 설정하면 된다.

 

5. type assertion 문법을 사용할 때

let code: any = 123; 
let employeeCode = <number> code; //안됩니다

 

assertion을 하고 싶다면 as 또는 <> 를 쓰면 되지만 리액트에선 컴포넌트로 오해할 수 있어서 <> 는 쓰지 않는게 좋다.