[React] Day05 - Todo 통계 기능 만들기 | 파생 상태(Derived State) 이해하기

🔥오늘 목표🔥

• 통계 기능(Todo Stats) 추가
• 전체 Todo 개수
• 완료된 Todo 개수
• 남은 Todo 개수

예시

전체: 3
완료: 1
남은: 2

이 기능을 만들면서 배열 데이터를 계산하는 방법과 파생 상태(Derived State) 개념을 함께 이해하게됨

---

TodoStats 컴포넌트 만들기

Todo 통계를 관리하는 컴포넌트를 따로 분리함.

components/TodoStats.jsx

Zustand store에서 todos 상태를 가져온다.

import useTodoStore from "../store/todoStore";

function TodoStats() {
  const todos = useTodoStore((state) => state.todos);

  const total = todos.length;
  const completed = todos.filter((todo) => todo.completed).length;
  const remaining = total - completed;

  return (
    <div>
      <p>전체: {total}</p>
      <p>완료: {completed}</p>
      <p>남음: {remaining}</p>
    </div>
  );
}

export default TodoStats;

여기서 중요한 부분은 filter()를 이용한 계산.

---

filter()로 완료된 Todo 계산하기

배열에서 특정 조건에 맞는 데이터를 찾을 때
filter()를 사용한다

const completed = todos.filter((todo) => todo.completed).length;

설명
1) todos 배열을 순회하면서
2) completed가 true인 todo만 남기고
3) 그 개수를 length로 계산한다.

예시데이터

[
 { text: "공부", completed: true },
 { text: "운동", completed: false },
 { text: "코딩", completed: false }
]

filter결과

[{ text: "공부", completed: true }]

따라서

completed = 1

이 된다.

---

남은 Todo 계산하기

남은 Todo는 간단하게 계산할 수 있다.

const remaining = total - completed;

즉

남은 할 일 = 전체 - 완료

이렇게 계산한다.

---

Derived State (파생 상태)

이번 기능에서 중요한 개념이 파생 상태(Derived State)이다.

파생 상태란

👉 기존 상태를 기반으로 계산해서 만들어지는 값

예시

상태	설명
todos	실제 상태
total	todos.length
completed	filter 계산
remaining	total - completed

즉

todos -> 실제 데이터
통계값 -> 계산된 데이터

이런 구조를 파생 상태(Derived State) 라고 한다.

---

TodoStats 컴포넌트 연결

App.jsx에서 TodoStats 컴포넌트를 추가해 화면에 표시했다.

import TodoStats from "./components/TodoStats";

function App() {
  return (
    <div>
      <h1>Todo App</h1>

      <TodoList />

      <TodoStats />
    </div>
  );
}

이제 Todo를 추가하면 통계가 자동으로 업데이트된다.

---

결과물

---

GitHub Pull Request Workflow

오늘은 기능 구현뿐 아니라 GitHub 협업 방식도 함께 연습함.

진행과정

1. feature/day05 브랜치 생성
2. Todo Stats 기능 개발
3. GitHub에 Push
4. Pull Request 생성
5. Merge
6. 브랜치 삭제

이 과정은 실제 개발에서 사용하는 Git Workflow와 동일.

---

📌 오늘 배운점

단순히 기능을 추가하는 것뿐 아니라
React에서 중요한 개념들을 함께 배울 수 있었음.

• 배열 데이터 계산(filter)
• 파생 상태(Derived State)
• 컴포넌트 역할 분리
• Zustand 전역 상태 활용
• GitHub Pull Request Workflow

---

📎 Project Link

🐙 GitHub Repository
👉 https://github.com/wjdtor2-design/Frontend-portfolio
📝 Velog Study Log