✅ React 기초 강좌

🎯 학습 목표

• React의 상태관리, 이벤트 처리, 리스트 렌더링, 조건부 렌더링을 활용해 실전 앱을 구성한다.
• 입력된 데이터를 목록에 추가하고 삭제하는 흐름을 구현한다.
• 컴포넌트를 기능별로 분리하고 props로 데이터를 전달하는 구조를 연습한다.

🗂️ 기능 명세

📄 전체 예제 코드

App.jsx

import { useState } from 'react';

function App() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  const handleAdd = () => {
    if (text.trim() === '') return;

    const newTodo = {
      id: Date.now(),
      content: text,
    };
    setTodos([newTodo, ...todos]);
    setText('');
  };

  const handleDelete = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div style={{ padding: '30px' }}>
      <h1>📝 Todo 리스트</h1>

      <div style={{ marginBottom: '20px' }}>
        <input type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="할 일을 입력하세요"
        />
        <button onClick={handleAdd}>추가</button>
      </div>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id} style={{ marginBottom: '10px' }}>
            {todo.content}
            <button onClick={() => handleDelete(todo.id)} style={{ marginLeft: '10px' }}>
              삭제
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

✅ 동작 예시

입력창: "React 공부하기" [추가]
↓
📝 Todo 리스트
- React 공부하기 [삭제]

📌 핵심 포인트 복습

• useState로 리스트 상태와 입력 상태 관리
• onChange로 입력 추적 → onClick으로 리스트에 추가
• .map()으로 반복 렌더링, filter()로 삭제 처리

✍️ 과제

✅ 아래 기능을 추가해보세요:

1. 엔터 키로도 추가 가능하게 만들기

   onKeyDown 또는 onKeyPress 이벤트 활용

2. 추가된 항목이 비어있으면 추가되지 않게 하기

   .trim()과 조건문으로 예외 처리

3. (선택) 항목 개수 하단에 표시하기

   총 n개의 할 일이 있습니다