[to-do-app] React 할 일 모두 삭제 기능

https://yeomss.tistory.com/205?category=976597 

[to-do-app] React 할 일 완료 & 삭제 기능

이전 글은 위에 링크로 달아놓겠습니다.

이번 기능은 모든 리스트들을 Clear 버튼을 누르면 모두 삭제되는 기능입니다.

---

 

 

 

 FooterView 

import React from "react";
import "../styles/footer.css";
import Content from "../components/footer/Content";

const FooterView = () => {
	return (
		<div className="clearAllContainer">
			<Content />
		</div>
	);
};

export default FooterView;

FooterView 입니다. Content 라는 컴포넌트 하나를 가지고 있습니다.

사실 굳이 View 까지 만들어야 싶지만 그냥 제가 폴더 구성을 이렇게 짜고 싶어서 한번 해봤습니다.

좀 불편하군요. 다음부터는 그냥 만들어야겠어요.

 

 

 Clear ALL 버튼 만들기 

import React, { useCallback } from "react";
import { useDispatch } from "react-redux";
import todoSlice from "../../reducers/todo";

const Content = () => {
	const dispatch = useDispatch();
	const clearTodo = useCallback(() => {
		dispatch(todoSlice.actions.clearTodo());
	}, [dispatch]);

	return (
		<span className="clearAllBtn" onClick={clearTodo}>
			Clear All
		</span>
	);
};

export default Content;

Clear All 이라는 버튼을 가지고 있습니다.

해당 버튼을 클릭하면 clearTodo() 라는 action이 실행됩니다.

.clearAllContainer {
	width: 8.5rem;
	height: 50px;
	line-height: 50px;
	background-color: white;
	border-radius: 5px;
	margin: 0 auto;
}
.clearAllBtn {
	color: #e20303;
	display: block;
	cursor: pointer;
}

CSS 는 다음과 같습니다.

 

 리스트 모두 삭제하기 

const initialState = {
	isTodoGetting: false,
	data: {
		list: [
			{ isCompleted: false, text: "hi1" },
			{ isCompleted: false, text: "hi2" },
		],
	},
	isOpenModal: false, // 모달창 오픈
};

todoSlice의 state는 위와 같으며 리스트를 모두 삭제하려면 data.list 를 빈 배열로 만들어야 합니다.

clearTodo(state, action) {
    state.data.list = [];
},

빈배열로 만드는 action은 간단합니다. 해당 state 에 빈 배열을 넣도록 합시다.

 

 

 화면 결과 

 

 

 

 

 

 

 

#리액트 투두앱 #React To Do App #리액트 모두 삭제하기 #react redux 설정

---

다음 글

https://yeomss.tistory.com/211?category=976597 

[to-do-app] React 할 일 추가 기능