모두 삭제하기 버튼

모두 삭제하기 버튼을 포함하는 TodoFooter 컴포넌트

마지막으로 TodoFooter 컴포넌트를 구현해 보겠습니다. 이 컴포넌트에는 등록된 모든 할 일을 삭제하는 버튼만 들어가면 도비니다. '삭제 버튼 하나를 위해 굳이 컴포넌트를 분리를 해야하나?라는 의문이 생길 수도 있습니다. 하지만 여러 개의 컴포넌트 간에 통신하는 방법을 직접 구현해 볼 수 있도록 추가로 분리 하였습니다.

​

모두 삭제하기 버튼 추가하기

이번에는 [Clear All] 버튼을 추가하기 위해 다음과 같이 코딩합니다.

TodoFooter 컴포넌트 코드

<template> 태그에 버튼 역할을 하는 태그 <span>을 정의하고, clearTodo 클릭 이벤트를 추가합니다. 버튼의 이름은 'Clear All'이며, 클릭했을 때 메서드에 정의한 clearTodo() 로직이 실행됩니다. clearTodo()

메서드에는 로컬 스토리지의 데이터를 모두 삭제하는 localStorage.clear()를 정의합니다.

​

앞 코드를 추가하고 다시 애플리케이션을 확인하면 다음과 같이 화면이 나옵니다.

TodoFooter가 구현된 화면

여기서 [Clear All] 버튼을 클릭하면 아래와 같이 로컬 스토리지의 데이터는 삭제되지만 화면이 자동으로 갱신되지 않습니다.

[Clear All] 버튼을 클릭했을 때의 결과 화면

따라서 다시 브라우저를 새로 고침해야만 할 일 목록이 로컬 스토리지에 저장되어 있는 데이터를 반영하여 표시합니다. 이 문제는 로컬 스토리지의 데이터만 지우고, 할 일 목록에 표시되는 할 일 데이터를 제거하지 않았기 때문에 나오는 현상입니다. 그런데 현재 할 일 목록 데이터는 TodoFooter 컴포넌트가 아닌 TodoList 컴포넌트에 있습니다. 그럼 어떻게 TodoFooter는 TodoList 컴포넌트의 데이터에 접근할 수 있을까요? 코드를 살펴보면 "Clear All" 버튼이 클릭되면 clearTodo 메서드가 호출되고, 이 메서드 내부에서 localStorage.clear()가 호출됩니다. 이는 브라우저의 로컬 스토리지를 비우는 것을 의미합니다. 로컬 스토리지는 브라우저 세션 간에 데이터를 저장하는 데 사용되며, 기본적으로 도메인 내의 모든 스크립트에서 접근 가능합니다.