기존에는 window 객체에 scroll 이벤트를 등록하여 handleScroll 함수를 호출하는 형식으로 무한 스크롤을 구현하였음.
그러나 매번 호출되는 이벤트로 인해 해당 페이지가 불필요하게 리렌더링되는 부분이 레시피 조회 후 목록이 렌더링 될 수록 버벅이는 현상을 일으키는 주요 원인이 되는 것을 발견.
따라서 scroll 이벤트 핸들러를 제거하고, 앞서 만들어둔 useIntersection 훅을 사용하여, 끝 지점에 도달하는 경우에만 리렌더링이 발생하도록 로직을 개선함. 해당 훅은 IntersectionObserver 를 이용한 End 지점을 관찰하여 끝지점에 도달하면 true 를 반환하는 커스텀 훅임.
그 외 짜잘한 변화
모든 목록을 사용자가 조회하고 나면, 끝 지점에서 모든 목록을 조회하였다는 토스트가 뜨도록 추가함
UI 개선
기존 Recipe 페이지 UI 및 디자인을
아래와 같이 max-wdith: 1240px 에 맞춰서 이전 Haccp 페이지와 동일한 레이아웃을 적용
카테고리의 경우도 이미지 스프라이트 기법을 적용하여 하나의 이미지 파일을 재사용함
기존에 레시피를 조회하면 별도의 목록이라는 표시 없이 이미지가 렌더링 되었으나
레시피 목록이라는 사실을 나타내는 타이틀을 표시되도록 수정. 추가적으로 gap 과 box-shadow 등의 균등하지 못하고 지저분한 느낌이 드는 영역을 수정하여 일관성 있는 레이아웃이 그려지도록 수정함
개요
성능 최적화를 위한 로직 개선
무한 스크롤 로직 개선
그 외 짜잘한 변화
모든 목록을 사용자가 조회하고 나면, 끝 지점에서 모든 목록을 조회하였다는 토스트가 뜨도록 추가함
UI 개선
기존 Recipe 페이지 UI 및 디자인을
아래와 같이 max-wdith: 1240px 에 맞춰서 이전 Haccp 페이지와 동일한 레이아웃을 적용
기존에 레시피를 조회하면 별도의 목록이라는 표시 없이 이미지가 렌더링 되었으나
레시피 목록이라는 사실을 나타내는 타이틀을 표시되도록 수정. 추가적으로 gap 과 box-shadow 등의 균등하지 못하고 지저분한 느낌이 드는 영역을 수정하여 일관성 있는 레이아웃이 그려지도록 수정함