Todo List 만들기로 배우는 React(feat.Styled component in emotion) - 6

✔️ 해당 글은 John Ahn님의 인프런강좌 "따라하며 배우는 리액트 A-Z"를 들으며 작성합니다.

 

이번에는 할 일 목록을 모두 지우는 버튼을 생성하겠습니다.

 

1️⃣ 버튼 생성하기

타이틀 옆에 All Delete라는 버튼을 만듭니다.

<button>All Delete</button>

2️⃣ onClick 함수 만들기

클릭했을 때 todoData를 빈 배열로 반환하는 onClick함수를 만들고, button에 넣어줍니다.

  const handleAllDeleteClick = () => {
    setTodoData([]);
  };
  
  ...
  
<button onClick={handleAllDeleteClick}>All Delete</button>

 3️⃣ 스타일 적용

타이틀 옆에 버튼을 위치시키기 위해 타이틀과 버튼을 감싸는 wrap을 위한 styled component 와

버튼 자체의 styled compoenent를 만듭니다.

const WrapTitle = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #245572;
`;

const BtnAllDelete = styled.button`
  padding: 0.8rem;
  box-sizing: border-box;
  border-radius: 1rem;
  border: none;
  background-color: #ff6b71;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  &:hover {
    color: #fff;
    background-color: #d1385c;
  }
`;

자잘한 스타일도 같이 고쳐주면 완성!