리액트를 다루는 기술 + typescript 2장 1

코드 이해하기

먼저, src/ 내부의 모든 ts, tsx 파일은 맨 위에 디폴트로 import 해야하는 항목이 있습니다.

import React from 'react';

typescript 를 적용하기 위해서 필수로 입력해야 하는 문장입니다.

먼저, yarn create react-app [생성한 프로젝트 이름] --template typescript로 생성한
파일을 이해하기 위해 src/App.tsx 파일을 열어봅니다.

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

function App() : JSX.Element {
  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;

• 최신 구문을 지향하기 때문에, import 를 사용합니다.
  

• const React = require('react'); ==> import React from 'react'

• JSX.Element 를 return 한다는 것은 본문의 반환 내용이 JSX구문으로 이루어진 객체를 반환한다는 의미입니다.

• typescript 를 사용했으므로, index.tsx에서 App.tsx를 사용할 때, 정확히 JSX.Element를 반환한다는 것을
  알 수 있습니다.