[ TypeScript ] TypeScript+React TODO 리스트 만들기 (1)

React와 TypeScript를 사용하여 TODO 리스트를 만들기에 앞서 차근차근 코드를 이해하고자 정적인 리스트 페이지를 먼저 만들어 보려고 합니다.

 

목차

1. package.json 파일 생성
2. typescript 설치 명령어
3. Todos.tsx 파일 만들기
4. App.tsx 파일 만들기
5. 결과물

 

 

1. package.json 파일 생성

종속 라이브러리를 설치하는데 이 파일이 필요합니다.

npm init -y

 

2. typescript 설치 명령어

npx create-react-app react-ts --template typescript

 

파일을 만들어준 뒤 밑의 명령어로 프로젝트를 실행시켜 주세요.

npm start

 

파일 전체 아웃라인

> react-ts 파일

   > node_modules

   > public

   > src

      > components

         > Todos.tsx 

      > App.tsx 

      > index.tsx

 

3. Todos.tsx 파일 만들기

오늘은 함수형 컴포넌트로 만들 예정입니다.

 

Todos.tsx

function Todos() {
    return <ul>
        <li>Learn React</li>
        <li>Learn Typescript</li>
    </ul>
}

export default Todos;

 

4. App.tsx 파일 만들기

Todos를 import해와주세요.

 

 

App.tsx

import Todos from './components/Todos';

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

export default App;

 

5. 결과물

참고

https://create-react-app.dev/docs/adding-typescript

Adding TypeScript | Create React App