[React] 투두 리스트 만들기

프로젝트 생성

Vite 공식문서 에 나와 있는 방법대로 yarn create vite 명령어로 프로젝트를 생성해 주었다. 개발환경은 React, Javascript 이다.

 

할일 목록 화면에 보여주기

TodoList.tsx

const todos = [
  { id: 1, text: "Buy milk" },
  { id: 2, text: "Clean the house" },
  { id: 3, text: "Go for a run" },
  { id: 4, text: "Finish homework" },
  { id: 5, text: "Call mom" },
  { id: 6, text: "Buy groceries" },
  { id: 7, text: "Walk the dog" },
  { id: 8, text: "Read a book" },
  { id: 9, text: "Do laundry" },
  { id: 10, text: "Write code" },
];

const TodoList = () => {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

export default TodoList;

• 투두 리스트를 구현하기 위해 TodoList 컴포넌트를 구성하였고, 배열 메서드 map 을 활용하여 할 일 목록을 동적으로 렌더링하도록 했다.
• 각 요소의 의미를 명확히 전달하기 위해서 시멘틱 태그를 사용하였다. 여기서는 ul 과 li 태그를 통해 해당 데이터가 목록 형식으로 구성되어 있음을 구조적으로 표현해 주었다.
• 각 할 일 항목에는 key 속성을 지정해주어야한다. key 는 리액트가 각 요소를 고유하게 식별하는 데 사용되며, 이를 통해 리액트는 항목의 추가, 삭제, 변경 여부를 효율적으로 추적할 수 있다. 

 

App.jsx

import TodoList from "./components/TodoList";

const App = () => {
  return (
    <main className="main-center">
      <TodoList />
    </main>
  );
};

export default App;

• App 컴포넌트에 TodoList 컴포넌트를 연결해주었다.
• 여기서도 시멘틱 구조를 고려하여 main 태그를 사용하여 주요 콘텐츠 영역임을 명확히 나타내주었다!