[Node.js] React와 Typescript 연동하기 / TSX

React란?

[Node.js] React.js 란? / React 사용법 ( create-react-app )

Typescript란?

[Typescript] Typescript 란? / Typescript 사용법

 

---

 

create-react-app 으로 Typescript이용한 React앱 만들기

// 컴퓨터에 패키지 설치되어있을때

create-react-app <프로젝트명> --template typescript


// 패키지 설치안하고, 1회성 프로젝트 생성할때

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

 

react와 typescript를 같이 사용하는 법

기존의 타입스크립트는 .ts 파일을 사용하지만,

react와 연동해서 사용할 땐 .tsx 파일을 사용한다.

 

// App.tsx

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

// Home.tsx, Login.tsx 파일에서 컴포넌트 가져오기!
import Home from "./screens/Home";
import Login from "./screens/Login";

function App() {
  const isLoggedIn = false;
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact>
            {isLoggedIn ? <Home/> : <Login/>}
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

 

타입 지정하기

 

클래스는 물리적으로 동작하는 메서드와 속성을 가지므로, js코드로 변환해도 컴파일된 형태 그대로 남아있지만,

import type 구문으로 불러온 타입은, js코드로 컴파일 후 사라진다.

import React from 'react';
import type {FC} from 'react';
// 컴파일 후 사라짐

import IPerson from './types.d.ts'
// 컴파일 후에도 남아있음
import {Text} from 'react-native';

export type PersonProps = {
  person: IPerson;
};

// 함수형 컴포넌트 리턴값의 타입과, 컴포넌트 속성값의 타입을 지정
const Person: FC<PersonProps> = ({person}) => {
  return <Text>{JSON.stringify(person, null, 2)}</Text>;
};

export default Person;