댕댕어디가 리팩토링 - #5 즐겨찾기 페이지

📌즐겨찾기는, 말그대로 회원이 원하는 장소를 즐겨찾기 해놓을 수 있는 기능으로, 회원기능이기 때문에 비로그인시에는 로그인이 필요하다는 알림을 띄운다.

 

즐겨찾기에서는 즐겨찾기한 장소데이터를 한번에 10개만 받아오고, 그 후엔 intersection observer를 사용해 observerRef가 화면에 보일때 쯤 다시 api요청을 해 다음 10개를 받아오도록 무한스크롤을 구현해놓았다.

useEffect(() => {
        if (!observerRef.current) return;

        const observer = new IntersectionObserver(
            (entries) => {
                if (entries[0].isIntersecting && !isLoading) {
                    fetchNextPage();
                }
            },
            { rootMargin: "100px", threshold: 0.1 }
        );

        observer.observe(observerRef.current);

        return () => {
            if (observerRef.current) observer.unobserve(observerRef.current);
        };
    }, [fetchNextPage, isLoading]);
    
return(
	//즐겨찾기 리스트
    <div ref={observerRef}>
        {isLoading && <Loading />}
    </div>
)

📌Best Practices (권장 사항)

이번에 뜬 브라우저 오류도 다른 페이지와 비슷했는데,

prop이 HTML태그에 직접 전달되고 있었다던가, defaultProps를 지원하지 않는데 사용하고 있던 것이 있었고 또 하나는,

원래 즐겨찾기 리스트를 map함수로 생성하고 있었는데 그때 key값을 favoriteId로 쓰고 있었고 아무 문제가 없어야하지만...프로젝트기간이 끝나고 백에서 db를 아예 지워버려서 리팩토링할 때 다시 만들어서 주셨는데 이상하게 똑같은 장소데이터를 2번씩 주는 에러가 있어서 key값이 중복되는 오류가 생겼다.. 그래서 key값을 map 함수의 index로 바꿔주었다.

로컬 점수

배포 후 점수