Typescript #3 React & Webpack 연결

eunji hwang·2020년 5월 14일

TYPESCRIPT

목록 보기

3/6

typescript 한국어 문서 : react & webpack 보고 따라하기

install

npm init -y : 초기화
npm i -D webpack webpack-cli : 웹팩설치
npm i react react-dom : 리액트, 리액트돔 설치
npm i -D @types/react @types/react-dom : @types/ 접두사로 리액트, 리액트돔의 선언파일 가져오기
npm i -D typescript ts-loader source-map-loader : 타입스크립트, ts로더, 소스맵 설치 > 웹팩에서 ts 사용할 수 있게 도와줌

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "removeComments": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

컴포넌트 작성

다른 리액트 프로젝트 처럼. src/components 경로에 작성한다. 확장자는 .ts, .tsx를 사용한다.

함수형 컴포넌트

import * as React from 'react'

// 부모 컴포에서 전달받은 props의 type를 지정한다
export interface HelloProps {
  compiler : string;
  framework : string;
}


// props의 type을 helloProps 인터페이스와 연결
export const Hello = (props:HelloProps) => {
  return <h1>{props.compiler} and {props.framework}!</h1>
}

클래스형 컴포넌트

// 클래스형 컴포넌트
import * as React from 'react'

export interface HelloProps {
  compiler : string;
  framework : string;
}

// React.Component를 상속받을때  props, state의 type를 지정할 수 있다.
export class Hello extends React.Component<HelloProps,{}> {
  render () {
    return <h1>{props.compiler} and {props.framework}!</h1>
  }
}

상속자에게 type지정

클래스형 컴포넌트를 만들때 React.Components에게 클래스를 상속받는다. 상속 받으면서 props와 state의 type를 지정할 수 있다.

React.Component<프롬스타입, 스테이트타입>

첫번째 값은 props의 타입 인터페이스를 지정하고,
두번째 값은 state의 타입 인터페이스를 지정한다.

index.tsx

// src/index.tsx
import * as React from 'react'
import * as React from 'react-dom'

import { Hello } from './components/Hello'

ReactDOM.render(
  <Hello compiler='TypeScript' framework='React' />,
  document.getElementById('root')
)

html 작성

// index.html
<!-- 상단 생략 -->
<body>
  <div id='root'></div>
  <!-- Dependencies -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  <!-- js -->
  <script src='./dist/main.js'></script>
</body>

./dist/index.js : 컴파일된 js파일을 불러온다.

webpack.config.js

module.exports = {
  mode : "production", // 개발모두, none 상황에 따라 설정
  devtool : "source-map", // 디버그시 위치파악하기 위해 source-map허용
  resolve : {
    // 확장자 추가
    extensions : ['.ts','.tsx']
  },
  module : {
    // loader 추가
    rules : [
      {
        test : /\.ts(x?)$/, // .ts or .tsx
        exclude : /node_modules/, // node_modules 폴더 제외
        use : [
          {
            loader : 'ts-loader' // loader 지정
          }
        ]
      },
      {
        // .js 출력파일 소스맵 처리
        enforce : 'pre',
        test : /\.js$/,
        loader : 'source-map-loader'
      }
    ]
  },
  externals : {
    // 다음중 일치하는 모듈을 가져올때 해당 전역변수가 있다고 가정하고 사용.
    // 이부분 중요
    // 웹팩이 React변수에서 react를 불러오기 위한 마법을 사용한단다.
    // 마법을 위한 주문....^^..................
    'react' : 'React',
    'react-dom' : 'ReactDOM'
  }
}