[Typescript] React에서 Typescript 사용하기

Typescript

[Typescript] React에서 Typescript 사용하기

jinist 2022. 5. 24. 03:59

React에서 Typescript를 사용하기 위한 기본 세팅을 진행해보려고 한다.

참고 : 웹 게임을 만들며 배우는 React에 TypeScript 적용하기

🔨기본 세팅

Typescript, React, Webpack 설치

npm i typescript
npm i react react-dom
npm i webpack webpack-cli -D

typescript로 만들어진 패키지의 경우는 그냥 사용해도 되지만

react, react-dom은 javascript로 되어있어서 타입이 지정되어 있지 않다.

이렇게 타입이 없는 것들은 커뮤니티에서 만들어 놓은 타입인 패키지를 설치한다.

npm i @types/react  @types/react-dom

💡 본 패키지와 types로 받은 패키지와 버전이 크게 달라지면 이슈가 생길 수 있기 때문에
맨 앞의 숫자인 Major버전은 무조건 맞춰야 한다. (하위 버전을 사용하던 웬만하면 알아서 맞추기)

ts-loader설치

babel이 아닌 webpack과 typescript를 이어줄 것이므로 ts loader를 설치한다.

npm i ts-loader @types/webpack ts-node

webpack.config.js 작성

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'eval', // hidden-source-map
  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')
  }
}

client.tsx파일이 main파일이 될 것이고, 이 파일을 통해 app.js파일을 만들 것이기 때문에

root경로에 client.tsx파일을 생성해준다.

tsconfig.json 작성

{
  "compilerOptions": {
    "strict": true, 
    "lib": [
      "es5",
      "es2015",
      "es2016", // 배열에서 include를 사용하려면 es6을 사용해야함.
      "dom"
    ],
    "jsx": "react" // react에서는 jsx를 사용하기 때문에 해당 옵션을 추가해준다.
  }

실행

세팅한 결과를 실행하여 파일을 확인해준다.

npx webpack

위 명령어 혹은

package.json의 scripts 부분을 통해 npm run dev를 통해 결과를 실행할 수 있다.

  "scripts": {
    "dev": "webpack"
  },

실행을 완료하면 dist폴더에 app.js파일이 생성된 것을 확인할 수 있다.

html생성

html 내부에서 ts, tsx를 실행하는 것이 아니라 js파일을 실행하는 것이기 때문에
dist에 있는 js파일을 연결시켜준다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="./dist/app.js"></script> // js 연결
</body>
</html>

App.tsx 생성

App.tsx를 생성하기 전에 먼저 client.tsx 파일 내부를 세팅해준다.

CRA에서 본 듯한 패턴임을 알 수 있다.

[client.tsx]

import * as React from 'react'; 
import * as ReactDOM from 'react-dom'; 

import App from './App';

ReactDOM.render(<App />, document.querySelector('#root'));

[App.tsx]

import * as React from 'react';

const App = () => {
  return (
    <>
      <div>App</div>
    </>
  )
}

export default App;

이렇게 하면 기본 세팅은 끝이다!

Create React App에 Typescript 적용하기

https://memostack.tistory.com/281