Skip to main content

TypeScript + React

React에서 TypeScript으로 설치​

  • 프로젝트를 생성할 경로에서 터미널에 npx create-react-app 프로젝트이름 --template typescript입력
caution

프로젝트를 설치 후, 실행하면 오류가 발생하기 때문에 몇 가지 파일들을 제거하면 된다.
프로젝트 안 src폴더 경로에 여러 파일들이 존재한다.

존재해야할 파일

  • App.css
  • App.tsx
  • index.css
  • index.tsx

위의 목록을 제외한 파일들은 전부 삭제하면 된다.
App.js와 같은 파일은 react프로젝트를 실행시킬 시, App.tsx파일에서 자동으로 컴파일이 되어 생성되기 때문에 문제는 없다.

tip

만약 생성된 React가 JS기반이고, TS로 변경하고 싶다면
프로젝트 생성/설치 경로에서
npm install --save typescript @types/node @types/react @types/react-dom @types/jest을 입력
설치 후, .js파일은 .ts파일로 .jsx는 .tsx로 변경하면 된다.

React 타입스크립트 사용​

JSX 타입지정​

  • .tsx파일에 변수 생성 및 return값이 html 태그 및 Component일 경우 타입을 작성
let title: JSX.Element = <h1>JJamVa</h1>;
let content: JSX.Element = <p>프론트엔드 개발자입니다.</p>;
note

:JSX.Element도 사용하지만 :React.ReactNode도 사용가능하다.

let title: React.ReactNode = <h1>JJamVa</h1>;
let content: React.ReactNode = <p>프론트엔드 개발자입니다.</p>;

Component 타입 지정​

  • react에서 Component는 함수와 같은 존재이며, 함수를 생성하기 위해서는 타입지정을 해야한다.
import React from "react";
import "./App.css";

function MyInfo(): JSX.Element {
  return (
    <>
      <h1>안녕하세요!</h1>
      <h2>제이름은 JJamVa 입니다.</h2>
      <h3>프론트엔드 개발자 입니다.</h3>
    </>
  );
}

function App() {
  return <MyInfo />;
}

export default App;

image

note

타입스크립트의 함수와 사용하는 방법은 같다.
다만 return 값이 html태그이기 때문에 return 값에 대한 타입을 잘 지정해야 오류 발생을 막을 수 있다.

props 타입 지정​

  • 타입스크립트 이용 시, Component에게 props를 전달하고 받을 경우 타입지정을 해야된다.
import React from "react";
import "./App.css";

interface MyInfoProps {
  name: string;
  job: string;
}

function MyInfo(props: MyInfoProps): JSX.Element {
  return (
    <>
      <h1>안녕하세요!</h1>
      <h2>제이름은 {props.name} 입니다.</h2>
      <h3>{props.job} 입니다.</h3>
    </>
  );
}

function App() {
  return <MyInfo name="JJamVa" job="프론트엔드 개발자" />;
}

export default App;

image

note

props는 객체형태로 묶여 전달되기 때문에 타입을 객체의 속성으로 설정해야된다.

function MyInfo(props: { name: string; job: string }): JSX.Element {
  return (
    <>
      <h1>안녕하세요!</h1>
      <h2>제이름은 {props.name} 입니다.</h2>
      <h3>{props.job} 입니다.</h3>
    </>
  );
}

한번만 사용될 객체 타입이라면 위의 코드와 같이 직접 props에 속성에 대한 타입을 기입하면 된다.
props에 대한 타입 정보를 자주 사용할 경우 type alias 혹은 interface로 만들어 사용하면 재사용성 측면에서 좋다.

useState 타입 지정​

  • 타입스크립트를 이용하여 useState를 사용할 경우 상태에 대해 타입 지정을 정의
  • useState<타입>(초기값)으로 작성하여 사용
import React, { useState } from "react";
import "./App.css";

interface Info {
  name: string;
  job: string;
}

function MyInfo(props: Info): JSX.Element {
  let [time, setTime] = useState<number>(0);
  function setIncrease(): void {
    setTime(time + 1);
  }

  return (
    <>
      <h1>안녕하세요!</h1>
      <h2>제이름은 {props.name} 입니다.</h2>
      <h3>{props.job} 입니다.</h3>
      <p>개발 기간은 {time}년 입니다.</p>
      <button onClick={setIncrease}>클릭!</button>
    </>
  );
}

function App() {
  return <MyInfo name="JJamVa" job="프론트엔드 개발자" />;
}

export default App;

image

note

useState의 상태값도 타입지정이 가능하다.
useState를 이용하여 로직을 구현 시, 상태 변경 함수로 지정하지 않은 타입으로 변경할 경우 오류 발생