개요
TypeScript와 React는 모두 매력적인 기술입니다. 그렇다면 하나만 쓰지말고 둘 다 사용하는 것은 어떨까요? 해당 포스팅에서는 타입스크립트와 리액트를 같이 사용할 수 있는 방법을 알려드립니다. 차근차근 따라해보세요.
필수 패키지 설치
TypeScript
이전 포스트에 상세하게 설명한 것이 있으므로 여기서는 요점만 짚고 넘어가겠습니다. 먼저 타입스크립트를 설치한 뒤.
npm install typescript @types/node -d타입스크립트 환경설정 파일(tsconfig.json)을 생성하고,
npx tsc --init컴파일러 옵션을 다음과 같이 변경합니다.
{
"compilerOptions": {
"outDir": "./out",
"rootDir": "./src",
"sourceMap": true
}
}React
npm을 통해 리액트를 설치하고,
npm install react react-dom리액트에 타입을 얹어주는 패키지를 추가적으로 설치합니다. 이러한 역할을 하는 패키지는 관례적으로 @types/로 시작합니다.
npm install @types/react @types/react-dom -d리액트는 jsx라는 특수한 문법을 사용하는데 기본값은 disable 입니다. 해당 문법을 사용할 수 있도록 tsconfig.json을 다음과 같이 설정합니다.
{
"compilerOptions": {
"jsx": "react"
}
} WebPack
리액트는 클라이언트측에서 페이지를 렌더링하는 기술이므로, 리액트로 작성된 코드를 브라우져가 이해할 수 있도록 빌드하는 과정이 필요합니다. 이러한 역할을 수행해주는 WebPack과 WebPack이 타입스크립트를 해석할 수 있도록 ts-loader 플러그인을 개발의존으로 설치합니다.
npm install ts-loader webpack webpack-cli -dWebPack이 무엇을 빌드할지 결정하기 위해, 아래의 webpack.config.js 파일을 프로젝트 최상위 폴더에 저장합니다.
module.exports = {
mode: 'development',
// 엔트리 파일 경로
entry: "./src/index.tsx",
// 빌드 결과물을 dist/main.js에 위치
output: {
filename: "main.js",
path: __dirname + "/dist"
},
// 디버깅을 위해 빌드 결과물에 소스맵 추가
devtool: "source-map",
resolve: {
// 파일 확장자 처리
extensions: [".ts", ".tsx", '.js']
},
module: {
rules: [
// .ts나 .tsx 확장자를 ts-loader가 트랜스파일
{ test: /\.tsx?$/, loader: "ts-loader" },
]
},
};첫번째 코드 작성
자바스크립트에서 jsx 문법을 사용하려면, 해당 소스파일의 확장자가 .jsx 이어야합니다. 동일하게 타입스크립트에서 jsx 문법을 사용하려면, 해당 소스파일의 확장자가 .tsx 이어야합니다. 해당 문법을 사용하지 않는 파일은 .js와 .ts를 사용해도 괜찮습니다.
여기서는 간단한 jsx 문법을 사용하는 예제를 작성해보겠습니다. 아래 코드를 복사하여 src/index.tsx로 저장합니다.
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById("app")
);마치 HTML인 것 처럼 <h1>태그가 사용된 것에 주목해주세요. 이것은 jsx라는 특수한 문법으로 <h1> 태그로 둘러쌓인 객체는 컴파일 시점에서 리액트에서 사용하는 컴포넌트로 변환됩니다.
빌드
수동 빌드
아래와 같이 webpack을 실행하면 webpack.config.js에서 설정한 entry와 entry가 사용한 모든 소스가 빌드되어, webpack.config.js에서 설정한 output에 저장됩니다.
npx webpack빌드된 파일은 html에서 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React TS!</title>
</head>
<body>
<!-- 리액트 컴포넌트가 삽입될 홀더 -->
<div id="app"></div>
<!-- 빌드한 자바스크립트를 로딩한다 -->
<script src="./dist/main.js"></script>
</body>
</html>자동 빌드
위의 방법은 코드가 변경될 때 마다 webpack을 실행해야 하는 단점을 가지고 있습니다. webpack-dev-server를 사용하면 코드가 변경될 때 마다, 변경점이 즉시 적용되는 개발용 서버를 실행시킬 수 있습니다.
npm install webpack-dev-server -dwebpack.config.js 파일에 아래처럼 설정합니다. contentBase는 index.html파일이 존재하는 경로로 설정하고, publicPath는 빌드 결과물이 저장된 경로로 설정합니다.
module.exports = {
devServer: {
contentBase: './',
publicPath: '/dist'
}
}이제 아래와 같이 webpack-dev-server를 실행할 수 있습니다.
npx webpack-dev-server'# Tech > React' 카테고리의 다른 글
| [Typescript React] 이벤트 핸들링 (0) | 2019.12.06 |
|---|---|
| [Typescript React] 컴포넌트 생명주기 (0) | 2019.12.06 |
| [Typescript React] 컴포넌트 만들기 (0) | 2019.12.06 |
| [Typescript React] JSX 문법 (0) | 2019.12.05 |
| [Typescript React] 리액트 프리뷰 (0) | 2019.12.05 |
