타입스크립트로 리액트 시작하기

리액트로 프로젝트를 생성하기 위해 기존에 사용하던 명령어는 다음과 같다.

npx create-react-app my-app

 

위 명령을 실행하면 필요한 라이브러리들을 자동으로 설치해준다.

또한 폴더 구조와 여러가지 js 파일들도 생성해주어 npm start 명령을 통해 예제 페이지를 확인할 수 있도록 해준다.

 

그런데 타입스크립트를 사용하기 위해서는 위의 js 파일들이 필요하지 않고, ts파일들이 필요하다.

친절하게도, 이런 경우를 위한 프로젝트 명령어가 존재한다.

npx create-react-app my-app --template typescript

 

위 명령어를 통해 프로젝트를 생성하면 아래와 같이 모든 js파일들이 tsx파일로 생성된다!

 

tsx

tsx파일은 html 컴포넌트를 사용할 수 있는 ts의 확장된 파일이다.

만약 ts파일에서 리액트 컴포넌트들을 사용하기 위해서는 다음과 같이 코드를 작성해야 한다.

function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, "Hello React!")
  );
}

html 태그를 사용하려 할 때마다 React.createElement()로 생성하여 매우 번거롭고 코드가 더러워진다.

반면 tsx파일에서는 다음과 같이 코드를 작성할 수 있다.

 

function App() {
  return (
    <div>
      <p>Hello React!</p>
    </div>
  );
}

두 코드가 똑같은 역할을 한다는 것을 믿기 어려울 정도로 간결하고 이해하기 쉬워졌다.

 

css 연결

리액트에서는 html-css를 연결하는 과정과 비슷하게 tsx-css를 연결할 수 있다.

// App.js
import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App-header">
      <p className="header-p">Hello React!</p>
    </div>
  );
}

export default App;

/* App.css */
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.header-p {
  font-size: 40px;
  background-color: pink;
  color: white;
  padding: 10px;
}

import "./App.css"를 통해 css파일을 import한 후 className을 통해 쉽게 컴포넌트의 스타일을 설정해줄 수 있다.

 

변수 사용

function App() {
  const name = "React";
  const style = {
    backgroundColor: "skyblue",
    fontWeight: "bold",
    padding: "20px",
  };
  return (
    <div style={style} className="App-header">
      <p className="header-p">Hello {name}</p>
    </div>
  );
}

리액트에서도 html과 비슷하기 컴포넌트 내에서 {}를 통해 변수를 사용할 수 있다.

위 코드에서는 name, style을 생성하여 style={style}, Hello {name}과 같이 사용하였다.