[feature]리스트에 무한스크롤 구현하기

[khj0426]

• 무한스크롤을 써서 내렸을때 리스트가 랜더링되게 만들기

[khj0426]

😢 0420: 겪은 문제점

먼저 카페리스트들을 커스텀 훅으로 불러오고 있는 상태임
useCafeList이라는 커스텀 훅을 만들었고, 카카오 맵을 인자로 받아서, 받은 map을 기준으로 가까운 카페를 검색하는 상태.

public categorySearch(
      code: CategoryCode | `${CategoryCode}`,
      callback: (
        result: PlacesSearchResult,
        status: Status,
        pagination: Pagination
      ) => void,
      options?: PlacesSearchOptions
    ): void;

page 별로 최대 15개의 검색 결과가 존재하고, 3페이지부터 1페이지까지 검색을 하게 했음.

문제는 컴포넌트에서 리스트에 스크롤을 구현할떄, 리스트가 많아서 화면에 처음 보여질떄, 리스트의 끝부터 보임.

그래서 사용자가 스크롤을 올려야 해당 아이템이 보여지는데,

스크롤을 내려야 아이템이 보이게 수정할 필요 있음! 💅

[khj0426]

페이지 전환을 해도 스크롤 정보가 유지되는 것을 확인할 수 있음

리액트 라우터는 history api를 사용함.

😃 history api는 스크롤의 위치를 기억함

브라우저가 페이지 이력을 저장하고 이동할떄 스크롤 위치를 자동으로 기록해주게 됨

더 공부해볼것들 : 사용자의 스크롤 정보를 유지하도록 설정하는 것도 좋을 것 같다!

😄 해결한 방법

되게 간단하게 의외로 해결 가능했다 현재 URL의 pathname이 바뀌게 된다면, window.scrollTo(0, 0)를 호출해 맨 위로 가게 한다.
router를 적어둔 가장 아래 부분에 컴포넌트를 새로 추가한다.

  <React.StrictMode>
    <HashRouter>
      <ScrollTop />
      <ThemeProvider theme={theme}>
        <RecoilRoot>
          <App />
        </RecoilRoot>
      </ThemeProvider>
    </HashRouter>
  </React.StrictMode>