여는 말

TS를 익히기 위해 만들어본 TODO 앱입니다.

이번 글에서는 정해진 갯수의 TODO를 화면에 보여주는 것을 목표로 합니다.

0. CRA

다음 명령어로 프로젝트를 생성합니다.

$ npx create-react-app todo-typescript --template typescript

1. 구성

다음과 같이 파일들을 생성했습니다.

2. 소스

' App.tsx ' 는 이렇게 생겼습니다.

// App.tsx
import React from "react";
import "./App.css";
import TodoList from "./components/TodoList";

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

TodoList 컴포넌트는 Todo 컴포넌트와 CreateTodo 컴포넌트를 보여주는 컴포넌트입니다

아직 Todo를 추가하는 기능이 없기 때문에, state에 두개의 값을 넣어주었습니다

//TodoList.tsx
import { useState } from "react";
import CreateTodo from "./CreateTodo";
import Todo from "./Todo";

const TodoList = () => {
  const [todos, setTodos] = useState([
    { idx: 1, title: "todo-1", project: "project-1" },
    { idx: 2, title: "todo-2", project: "project-2" },
  ]);

  const Items = () => {
    return todos.map((item) => {
      return (
        <Todo idx={item.idx} title={item.title} project={item.project}></Todo>
      );
    });
  };

  return (
    <div>
      {Items()}
      <CreateTodo />
    </div>
  );
};

export default TodoList;

Todo를 표현하는 컴포넌트를 작성합니다

//Todo.tsx
export interface TodoProps{
  idx: number;
  title: string;
  project: string;
};

const Todo = (props: TodoProps) => {
  return (
    <div className="todo-item">
      <div>
        <p className="todo-title">{props.title}</p>
      </div>
      <div>
        <p className="todo-project">{props.project}</p>
      </div>
    </div>
  );
};

export default Todo;

CreateTodo 컴포넌트는 새로운 Todo를 추가하기 위한 컴포넌트입니다

// CreateTodo.tsx
const CreateTodo = () => {
  return (
    <div className="create-todo-container">
      <label className="lbl-title">Title</label>
      <input className="input-title"></input>
      <label className="lbl-project">Project</label>
      <textarea className="input-project"></textarea>
      <button className="btn-create">Create</button>
      <button className="btn-cancel">Cancel</button>
    </div>
  );
};

export default CreateTodo;

3. 결과

이제 아래와 같이 화면에 나타납니다 ( css는 생략 )

닫는 말

전체 소스 : Github