배워서 나주는 React에 Typescript 적용하기

foreverchoi0706·2021년 5월 30일

React typescript

배워서 나주는

목록 보기

6/6

배워서 나주는 시리즈 여섯번째
이번에는 React에 Typescript를 적용해볼 것이다.

1) Typescript의 장점

개발 전체에서 사용되는 데이터들의 포맷을 강제하여 협업에서 강력한 안정성과 편의성을 발휘한다.
개발단계에서 에러를 표시해주기 때문에 컴파일/빌드 후 에러 발생을 줄여준다.
Javascript를 기반으로 두었기 때문에 풍부한 커뮤니티를 가지고있다.

생각보다 간단하니, Typescript를 적용 할 예정이라면 따라해보자.

2) 그래서, 어떻게 적용하는건데?

준비물 : Node.js와 코드 에디터와 React기반 프로젝트 끗

이 글에서는 배워서 나주는 React에 Tailwind Css 적용하기에서 구축한 개발환경에서 Typescript를 적용할 것이다.

2.1)패키지 설치

우선 Typescript를 전역으로 설치해야한다.(설치되어있다면 생략가능하다.)

npm install -g typescript

Typescript의 필수 설정파일인 tsconfig.json을 생성하자.

tsconfig.json는 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정한다.

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  }
}

참고로

tsc --init

으로도 tsconfig.json를 생성할 수 있다. 다음으로는 이하의 패키지를 프로젝트에서 설치하자.

npm install -D @types/react
npm install -D @types/react-dom
npm install -D ts-loader

@types/react는 react의 Typescipt 버전이다.

@types/react-dom는 react-dom의 Typescipt 버전이다.

ts-loader는 .ts/.tsx확장자를 읽어들이는 로더이다.

전부 설치했다면 pakage.json는 이하와 같은 의존성(dependencies)과 개발의존성(devDependencies에)을 가지게 된다.

pakage.json

  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "@types/react": "^17.0.8",
    "@types/react-dom": "^17.0.5",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.1",
    "postcss": "^8.3.0",
    "postcss-loader": "^4.3.0",
    "style-loader": "^2.0.0",
    "tailwindcss": "^2.1.2",
    "ts-loader": "^9.2.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }

2.2)설정

2.2.1)webpack.config.js

이제 Webpack 설정을 해주자.

webpack.config.js

우선 entry 속성의 빌드타겟을 index.js => index.ts로 변경해준다.

  entry: path.resolve(__dirname, "src/index.ts"),

Webpack이 .ts/.tsx확장자를 ts-loader가 읽을 수 있도록 module에 rules배열에 추가하고,

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /.jsx?$/,
        include: [path.resolve(__dirname, "src")],
        exclude: [path.resolve(__dirname, "node_modules")],
        loader: "babel-loader",
      },
      {
        test: /.css?$/,
        exclude: [path.resolve(__dirname, "node_modules")],
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },

resolve 속성에는 .tsx를 추가하자.

  resolve: {
    extensions: [".tsx", ".json", ".js", ".jsx"],
  },

2.3)Typescript 적용

기존의 index.js와 App.js를 각각 index.ts와 App.tsx로 내용 및 확장자를 수정하였다.

~~src/index.js~~
src/index.ts

import React from "react";
import ReactDom from "react-dom";
import App from "./components/App";
import "../styles/global.css";

const root = document.querySelector("#root");

ReactDom.render(React.createElement(App), root);

~~src/componets/App.js~~
src/componets/App.tsx

import React from "react";

const App = () => {
  return (
    <>
      <div className="m-5 bg-yellow-500 text-blue-500 font-bold">
        배워서 나주는 React에 Typescript 적용하기
      </div>
    </>
  );
};

export default App;