React 과정에 들어가면서 todolist 만들기 실습이 있었다.
lv.1 ~ lv.3까지 있었는데 우선 lv.1을 정리해보고자 한다.

핵심 개념 정리

🔹 useState

React에서 데이터를 관리하기 위해 사용한다.

const [title, setTitle] = useState("");
const [todos, setTodos] = useState([]);

• title → input 값 저장
• todos → 할 일 목록 저장

---

🔹 React의 데이터 흐름

TodoList를 만들면서 가장 중요했던 개념은 다음 흐름이었다.

입력 → state 변경 → 화면 자동 업데이트

React는 state가 바뀌면 UI가 자동으로 다시 그려진다.

---

Todo 데이터 구조

각 todo는 다음과 같은 형태로 구성했다.

{
  id: Date.now(),
  title: title,
  completed: false,
  createdAt: new Date().toLocaleString()
}

• id → 고유값

• title → 할 일 내용

• completed → 완료 여부

• createdAt → 생성 시간

---

기능 구현 과정

할 일 추가 (Create)

💡 핵심

• input 값 → state로 관리

• 버튼 클릭 → 배열에 추가

function handleAddTodo() {
  if (title === "") return;

  const newTodo = {
    id: Date.now(),
    title: title,
    completed: false,
    createdAt: new Date().toLocaleString(),
  };

  setTodos([...todos, newTodo]);
  setTitle("");
}

❗ 중요 포인트

기존 배열을 직접 수정하지 않고
새로운 배열을 만들어야 한다

👉 그래서 spread 사용

---

목록 출력 (Read)

배열을 화면에 출력할 때는 map을 사용한다.

<ul>
  {todos.map((t) => (
    <li key={t.id}>
      <div>{t.title}</div>
      <div>{t.createdAt}</div>
    </li>
  ))}
</ul>

❗ 중요 포인트

• map은 배열을 순회하면서 UI를 만든다

• key는 반드시 필요

---

할일 삭제 (Delete)

삭제는 filter를 사용한다.

function handleDeleteTodo(id) {
  setTodos(todos.filter((t) => t.id !== id));
}

💡 핵심

삭제 = 특정 값을 제외하고 남긴다

---

완료 처리 (Update)

완료 상태 변경은 map을 사용한다.

function handleDoneTodo(id) {
  const newTodos = todos.map((t) => {
    if (t.id === id) {
      return {
        ...t,
        completed: !t.completed,
      };
    }
    return t;
  });

  setTodos(newTodos);
}

💡 핵심

수정 = map
삭제 = filter

---

UI 처리

🔹 완료 상태 스타일

<li className={t.completed ? "completed" : ""}>

---

회고

아직 제대로 TodoList를 마스터하지 못한 것 같다. map과 filter를 사용함에 있어서, 그리고 구조대로 코드를 작성함에 있어서 미숙해서 복습 겸 정리를 진행했다.