React 에 TypeScript 적용하기 준비 단계

1. React에 TypeScript를 적용하는 이유?

컴포넌트별로 분리되어있는 리액트의 장점이 단접이 된다고 느꼇다. 상위 컴포넌트에서 하위 컴포넌트로 정보를 내려줄떄 정확하게 확인할 방법이 없기 떄문에 처음부터 어떤 값이 들어갈지 정해주는게 좋다고 느껴 타입스크립트를 적용해보자라고 생각하게 되었다.

2. TypeScript적용하는 방법

리액트 타입스크립트 패키지 설치하기

npm i react react-dom typescript

리액트와 타입스크립트를 설치해준다.

이후 tsconfig.json파일을 만들어 프로젝트를 컴파일러 옵션을 지정해준다.

 

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "lib": ["es2020", "dom"],
    "target": "ES6",
    "jsx": "react"
  }
}

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확장자를 읽어들이는 로더이다.

3 webpack설정

다음으로 webpack을 설정해주어야한다.

const path = require('path');

module.exports = {
  mode: 'development', 
  devtool: 'eval', 
  resolve: {
    extensions: ['.jsx', '.js', '.tsx', '.ts'],
  },

  entry: {
    app: './client',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
    ],
  },
  plugins: [],
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist',
  },
};

 

이후  client.tsx 파일을 만들고 

 

client.tsx

import * as React from "react";
import * as ReactDom from "react-dom";

import Component from './Component';

ReactDom.render(<Component />, document.querySelector("#root"));

4. package.json

{
  "name": "lecture",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"
  },
  "author": "kikiki",
  "license": "MIT",
  "dependencies": {
    "@types/react": "^17.0.30",
    "@types/react-dom": "^17.0.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.4.4"
  },
  "devDependencies": {
    "ts-loader": "^9.2.6",
    "webpack": "^5.59.0",
    "webpack-cli": "^4.9.1"
  }
}

npm run dev를 하면 웹팩이 실행되서 dist폴더에 app.js파일이 만들어진다.

이후 HTML파일과 js파일만 열결해주면 된다