Typescript로 React 시작하기

 

새로운 리액트 앱 생성하기

 

프로젝트를 설치할 곳으로 이동하여 명령어 입력. 뒤에 입력하는 travelog 가 프로젝트 폴더의 이름이 된다. 

타입스크립트 설정이 적용된 프로젝트가 생성된다. 

npx create-react-app travelog --template typescript

정상 설치가 되면 다음과 같은 run commands를 볼 수 있다. 

cd travelog
npm start

해당 프로젝트 폴더로 이동하여 npm start 로 서버를 실행하면

http://localhost:3000 에서 실행된다.

 

자 이제 본격적으로 코드를 작성 시작!

에 앞서 파일이 너무 많아 안그래도 복잡해 죽겠는데 더 복잡한건 싫으니 필요없는 파일은 다 지워버린다ㅏ 유후! 

App.tsx index.tsx 빼곤 다 지워도 된다. css는 다시 만들게될꺼같아서 그냥 남겨두었다.

그 후 예제파일로 Greeting.tsx를 만들어준다. 인사하는 Component를 만드는 예제이다. 

 

각각 파일에 다음과같은 코드를 적는다. 

//Greeting.tsx

import React from 'react';

// 컴포넌트의 porps에 대한 타입 선언시 type 또는 interface 사용 가능
interface PersonProps {
  name: string;
  comment: string;
};

export function Greetings(props: PersonProps) {
  return <div> {props.name} : {props.comment}</div>
}

//App.tsx

import React from 'react';
import './App.css';
import { Greetings } from './Greeting';

function App() {
  return (
    <div className="App">
      <p>
        <Greetings name="해선" comment="안녕하세요~" />
        <Greetings name="램프요정지니" comment="안녕~ 오늘의 소원은 300개!" />
      </p>
    </div>
  );
}

export default App;

Greeting이란 Component를 만든 후 App.tsx에서 두개의 Greeting을 불러와서 띄워주었다. 

 

그 후 다시 실행을 시켜주면 (npm start)

아까 켜둔 창을 닫지 않았으면 다시 실행하지 않아도 알아서 변경점이 적용된다. 

 

이렇게 각각 주어진 값을 가진 Component가 화면에 출력되는 것을 볼 수 있다.