Todo List

#2BehavioralEasy

간단한 할 일 목록 컴포넌트를 구현하세요.

요구사항

입력창에 텍스트를 입력하고 Add 버튼을 누르면 목록에 추가됩니다
빈 문자열은 추가하지 않습니다
각 항목 옆의 Delete 버튼으로 삭제 가능합니다
추가 후 입력창이 비워져야 합니다

마크업 규칙 (테스트 기준)

입력창: <input placeholder="Add a task" />
추가 버튼: <button>Add</button>
항목 리스트: <ul> 안 <li> (각 li에 텍스트 + <button>Delete</button>)

학습 포인트

useState로 입력값과 리스트를 관리
폼 제출/버튼 클릭 핸들링
리스트 렌더와 key 사용

import { useState, FormEvent } from 'react';

export default function App() {
  // TODO: 입력값 state, 리스트 state를 만드세요
  // TODO: Add 버튼/폼 제출 시 리스트에 추가하세요 (빈 문자열 무시)
  // TODO: 각 항목 옆 Delete 버튼으로 삭제하세요
  return (
    <div>
      <h1>Todo List</h1>
      <form>
        <input placeholder="Add a task" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {/* 항목을 렌더하세요 */}
      </ul>
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

import { useState, FormEvent } from 'react';

export default function App() {
  // TODO: 입력값 state, 리스트 state를 만드세요
  // TODO: Add 버튼/폼 제출 시 리스트에 추가하세요 (빈 문자열 무시)
  // TODO: 각 항목 옆 Delete 버튼으로 삭제하세요
  return (
    <div>
      <h1>Todo List</h1>
      <form>
        <input placeholder="Add a task" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {/* 항목을 렌더하세요 */}
      </ul>
    </div>
  );
}

Open Sandbox