CRA 없이 React 앱 설정하기 (+ TS, Eslint/Prettier) — (2) TypeScript와 React

6 min readJul 3, 2022

시리즈

(0) 동기와 방향성
(1) Babel과 Webpack
(2) TypeScript와 React
(3) Eslint와 Prettier

4. TypeScript

아래 명령어로 TypeScript와 React에 필요한 Type 파일들을 설치한다.

npm install --save-dev typescript @types/react @types/react-dom

@types/로 시작하는 파일들은 해당 패키지가 TypeScript를 자체적으로 지원하지 않을 때 활용할 수 있는 type을 정의해놓은 패키지이다. React도 이 경우에 해당하기 때문에 react, react-dom에 대한 type들을 별도로 설치해주어야 한다.

TS를 babel이 제대로 변환하기 위해서는 tsconfig 파일을 생성해 별도의 설정을 추가해주어야 한다.

{
  "compilerOptions": {
    "target": "es5", // 결과 파일 형식
    "module": "es2015", // module 형식
    "jsx": "react-jsx", // react import 안하고 사용 가능
    "esModuleInterop": true // import시 namespace alias 가능
  },
  "include": ["src"]
}

우선 큰 틀에서 compilerOptions와 include로 나뉜다.

compilerOptions에서는 TS를 어떤 방식으로 컴파일 할 것인지에 대해서 설정할 수 있으며, include에서는 어떤 디렉토리에 이 설정을 적용할 것인지에 대해서 지정한다.

상단의 코드에서 compilerOptions에 대해서 주석을 통해서 설명이 되고 있다.

그 중에 추가적인 설명이 필요한 첫 번째는 jsx 설정이다. 앞서서 React 17에서부터 react를 import 하지 않고도 JSX를 사용할 수 있게 되었다고 설명했다. 이 기능을 TS에도 전달하기 위한 설정으로 ‘react-jsx’로 설정해주면 해당 기능을 이용할 수 있다. (참고)

두 번째는 esModuleInterop 설정이다. 아직 완벽하게 이해하지는 못했지만 namespace import와 default import에서 발생하는 오류 때문에 추가하는 설정이다. 공식 문서의 설명은 다음과 같다. 자세한 내용은 복잡하고 길기 때문에 추후에 더 자세히 공부하고 별도로 작성할 예정이다.

위 설정과 별도로 하나의 설정을 추가해주어야 한다. 이미지를 불러오기 위해서 webpack에는 설정을 했는데, TS는 webpack의 설정을 참고하는 것이 아니기 때문에 TS 파일에 import 되는 이미지 파일을 인식하지 못한다. 여기서 인식하지 못한다는 것은 불러온 파일의 type을 알 수 없기 때문에 compile이 되지 않는 것을 의미한다. 이를 해결하기 위해서는 src 디렉토리에 이미지 확장자들에 대한 타입을 추가해주어야 한다. 이 파일의 파일명은 custom.d.ts로 생성한다. (index.d.ts로 설정하면 추후에 이를 index.tsx에서 생성된 타입 파일로 인식하고 parser가 무시하는 상황이 발생할 수 있으니 주의한다.)

declare module '*.jpg' {
  const value: string;
  export = value;
}

위 타입 선언에서 jpg 파일의 타입을 string으로 설정한 이유는 컴파일 시에 해당 이미지가 위치한 파일 경로 문자열로 변환될 것이기 때문이다.

위에서 사용된 export = value와 같은 문법은 export assginment라고 불리는 방식으로 export default와 유사하다. 그리고 이 설정 파일을 tsconfig가 참조할 수 있도록 추가해준다.

// tsconfig.json
{
  // ...
  "include": ["src", "src/custom.d.ts"]
}

5. React

React를 설치하기 위해서 다음 명령어를 실행한다.

npm install react react-dom

React는 root라는 id를 가진 div가 있는 HTML 문서에 App을 추가하는 방식으로 작동하기 때문에 HTML 파일과 추가할 App, 그 둘을 이어줄 파일 세 가지가 필요하다.

우선 public 디렉토리 아래에 HTML 파일을 아래와 같이 생성한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React 설정하기</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

body 내부에 noscript와 div 두 가지 요소가 추가되어 있다. React를 기반으로 작동하는 앱은 JS가 지원되지 않는 환경에서는 실행할 수 없기 때문에 그 환경에서는 noscript 내부의 텍스트가 표시된다. 그리고 div는 앞에서 설명한 것처럼 React App의 entry point의 역할을 한다.

그리고 src 디렉토리를 생성하고 그 안에 App.tsx를 생성한다.

function App() {
  return <div>Hello World</div>;
}

export default App;

이후 이 앱을 렌더링 해서 HTML에 삽입해야 하는 index.tsx 파일을 src 디렉토리에 생성한다.

import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

모든 설정을 마치고 npm run start 명령어를 통해서 개발 서버를 시작하고 http://localhost:3000에 접속하면 정상적으로 Hello World가 출력되는 것을 확인할 수 있다.

다음 편에는 마지막으로 eslint와 prettier 설정을 추가한다.

시리즈

(0) 동기와 방향성
(1) Babel과 Webpack
(2) TypeScript와 React
(3) Eslint와 Prettier

CRA 없이 React 앱 설정하기 (+ TS, Eslint/Prettier) — (2) TypeScript와 React

4. TypeScript

5. React

Written by Bling