[TODO App] 동적 앱 만들기 (TodoFooter.vue)

Vue.js 동적 앱 만들기 - TodoFooter 컴포넌트 구현

이번 포스트에서는 TodoFooter.vue 컴포넌트를 구현하여 모든 할 일을 한 번에 삭제하는 기능을 만들어보겠습니다.

1. 간단한 구조의 Footer 컴포넌트

TodoFooter 컴포넌트는 매우 간단한 구조로 되어 있습니다. 전체 할 일 목록을 초기화하는 기능만 담당합니다.

<template>
  <div class="clearAllContainer">
    <span class="clearAllBtn" @click="clearTodo">전체 초기화</span>
  </div>
</template>

템플릿 구조 분석

• 단일 기능: "전체 초기화" 버튼 하나만 포함
• 클릭 이벤트: @click="clearTodo"로 클릭 시 메서드 호출

2. methods에 전체 삭제 기능 구현하기

TodoFooter 컴포넌트는 단 하나의 메서드만 가지고 있습니다.

export default {
  methods: {
    clearTodo() {
      localStorage.clear();
    },
  },
};

clearTodo() 메서드 분석

1) localStorage.clear()의 역할

• 전체 데이터 삭제: 현재 도메인의 모든 로컬스토리지 데이터를 삭제합니다
• 한 번에 초기화: 개별 항목을 하나씩 삭제할 필요 없이 모든 데이터를 즉시 제거합니다
• 완전한 리셋: 앱을 처음 설치했을 때의 상태로 되돌립니다

2) 다른 삭제 방법과의 비교

// ❌ 개별 삭제 (비효율적)
for (let i = 0; i < localStorage.length; i++) {
  localStorage.removeItem(localStorage.key(i));
}

// ✅ 전체 삭제 (효율적)
localStorage.clear();

왜 data()가 필요 없을까요?

TodoFooter 컴포넌트에는 data() 함수가 없습니다. 그 이유는:

1. 상태 관리 불필요: 이 컴포넌트는 단순히 삭제 기능만 제공하므로 자체 상태가 필요 없습니다
2. 부모 컴포넌트와 독립적: 다른 컴포넌트의 데이터에 의존하지 않고 독립적으로 동작합니다
3. 단순한 기능: 복잡한 로직 없이 단순한 클릭 이벤트만 처리합니다

3. 이벤트 핸들링과 사용자 경험

클릭 이벤트 처리

@click="clearTodo"

• 직관적인 인터페이스: 사용자가 버튼을 클릭하면 즉시 모든 할 일이 삭제됩니다
• 즉시 실행: 별도의 확인 과정 없이 바로 실행되어 빠른 초기화가 가능합니다

사용자 경험 고려사항

• 위험한 작업: 모든 데이터를 삭제하는 기능이므로 사용자에게 주의가 필요합니다
• 복구 불가능: localStorage.clear()로 삭제된 데이터는 복구할 수 없습니다
• 명확한 라벨링: "전체 초기화"라는 텍스트로 기능을 명확히 표현합니다

4. localStorage.clear()의 동작 원리

전체 삭제 과정

1. 현재 도메인 확인: 현재 웹사이트의 로컬스토리지만 대상으로 합니다
2. 모든 키-값 쌍 삭제: 저장된 모든 데이터를 한 번에 제거합니다
3. 즉시 반영: 삭제가 즉시 적용되어 브라우저에 반영됩니다

삭제 범위

// 삭제 전
localStorage.setItem("할 일 1", "데이터1");
localStorage.setItem("할 일 2", "데이터2");
localStorage.setItem("할 일 3", "데이터3");

// localStorage.clear() 실행 후
console.log(localStorage.length); // 결과: 0
console.log(localStorage.getItem("할 일 1")); // 결과: null

5. 컴포넌트 간의 관계

독립적인 컴포넌트

• 단일 책임: 전체 삭제 기능만 담당하는 단일 책임 원칙을 따릅니다
• 재사용 가능: 다른 프로젝트에서도 쉽게 재사용할 수 있습니다
• 의존성 없음: 다른 컴포넌트나 데이터에 의존하지 않습니다

부모 컴포넌트와의 통신

• 이벤트 발생: 삭제 후 부모 컴포넌트가 변경을 감지할 수 있도록 이벤트를 발생시킬 수 있습니다
• 자동 업데이트: localStorage가 변경되면 다른 컴포넌트들이 자동으로 반응할 수 있습니다

6. 완성된 TodoFooter.vue 컴포넌트

<template>
  <div class="clearAllContainer">
    <span class="clearAllBtn" @click="clearTodo">전체 초기화</span>
  </div>
</template>

<script>
export default {
  methods: {
    clearTodo() {
      localStorage.clear();
    },
  },
};
</script>

7. 전체 앱에서의 역할

TodoFooter 컴포넌트는 Todo 앱의 마지막 부분을 담당합니다:

1. TodoInput: 새로운 할 일 추가
2. TodoList: 할 일 목록 표시 및 개별 관리
3. TodoFooter: 전체 데이터 초기화

이렇게 각 컴포넌트가 명확한 역할을 분담하여 유지보수가 쉽고 확장 가능한 앱을 만들 수 있습니다.

사용 시나리오

• 테스트 후 초기화: 개발 중 테스트 데이터를 모두 삭제하고 싶을 때
• 새로운 시작: 모든 할 일을 완료하고 새로운 목표를 설정하고 싶을 때
• 데이터 정리: 오래된 할 일들을 모두 정리하고 싶을 때

다음 포스트 소개

사실 기본적인 App이 잘 완성되었지만, 아직 말씀드리지 않은 치명적 문제가 있습니다. ㅎㅎ
다음 포스트에서는 이 문제를 소개하고 리팩토링 계획에 대해 소개하도록 하겠습니다!