코딩에 진심인 사람을 위해 준비한 리액트 타입스크립트 | 실제 회사에서 쓰는 레벨 ver

Documentation - React

이 사이트를 참고하면 된다.

일단 typescript를 템플릿으로 하여 react-app을 만들어 준다.

npx create-react-app my-app --template typescript

꽤 오래걸린다.

다 만들어졌을 당시 구성은 이렇게 된다.

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es6"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

react를 처음 만들었을 당시 tsconfig.json파일의 내용이다.

• target의 es5 → es6로
• lib에 es6 추가
• module부분은 esnext(react), commonjs(nodejs) 둘 중 react부분을 사용한 모습니다.

JS를 TS식으로 바꾸어보자

App.tsx 파일의 코드 :

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="<https://reactjs.org>"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

여기서 이전 버전의 문법인 function App부분을 바꾸어보자

function App()
//위의 코드를 아래와 같이 변경 가능하다.
const App:React.FC=() =>