[포켓몬 수집 사이트]2. 중복값처리, top구현,react-toastify

중복값 필터링

추가버튼을 누르면 selected라는 state에 담기는데, 이때 추가하려는 id와 selected에 담긴 id를 비교!

const duplicateValue = selected.filter((prev) => prev.id === data.id);

 

스크롤시 최상단으로 올리는 top버튼 구현! 해당 버튼을 따로 지정한 스타일 컴포넌트를 쓰기위해 Link로 써야했는데,

페이지가 새로고침되어서 e.preventDefault()로 막기!

const handleScrollToTop = (e) => {
    e.preventDefault();
    scrollTo(0, 0);
  };

 

react-toastify

alert 라이브러리!

설치후 설정!

import { toast, ToastContainer } from "react-toastify";
...
const notifyDuplicate = () => toast("이미 선택된 포켓몬입니다.");
if (selected.length !== 0 && duplicateValue.length > 0) {
  return notifyDuplicate();
}

<ToastContainer
    position="top-right"
    autoClose={500}
    hideProgressBar={false}
    newestOnTop={false}
    closeOnClick
    rtl={false}
    pauseOnFocusLoss
    draggable
    pauseOnHover
  />