firebase v9 기준으로 작성됨 react-bottom-scroll-listener를 사용해서 스크롤이 바닥에 닿았을때 다음 글을 파이어베이스에서 가져오는 작업 firebase에서 문서 가져오기 firebase에서 문서를 가져오는 방법은 다음과 같다. 우리는 여기에 무한스크롤을 추가해야한다. react-bottom-scroll-listener 설치 자세한 사용방법은 [npm문서]를 참조. 스크롤 위치나 기타등등 조절할 수 있는듯 하다. 문서 가져오기 기본틀 우선 컴포넌트 함수 바깥에 변수 하나를 선언해준다. 쿼리설정 lastVisible은 남은 게시글이 있는지 여부를 판단하는 boolean값이 될거다. 모든 게시글을 불러왔을 때 -1로 선언할 예정이다. 가져온 문서 뿌리기

vscode에 eslint extension을 설치했다면 다음 코드를 작성했을 때 'React Hook useEffect has a missing dependency: 'useEffect의 종속값이 없는데요?' 라는 에러가 나온다. 그럴때, useEffect의 끝부분에 다음 주석을 달아주면 에러가 사라진다.

다음 글은 데이터베이스가 json일 경우를 가정하고 작성. 다른경우라도 크게 다르지 않을듯. 겪은 문제 이런 url이 있다고 쳐보자. [카테고리] -> [컴퓨터 상품 리스트] 에서 정보를 받아와 상품 상세 페이지로 진입한다. 이 경우 Link를 타고 와야 파라미터가 전달되는데, 상품 id(0001)를 직접 입력해서 상세페이지로 접근하면 전달받은 정보가 없어서 텅 빈 페이지가 나온다. 해결 우리에겐 리액트라우터가 제공하는 useParams가 있다. router 관리는 대충 이런식으로 하고있을건데 id와 item은 useParams에 저장되어있다. 여기서 id는 카테고리 번호, item은 상품의 고유번호다. 일단 갖고와준다. 그리고 우린 해당 id와 item이 일치하는 데이터를 가져와야한다. 배열에서 원하는 데이터를 찾아주는 Array.find()를 이용하자. 그리고 goods로 렌더링 하면 된다. 참고로 json의 구조는 이렇게 해놨다.

어디서 오나 궁금했다 도대체 [...params].js의 파라미터들은 어디서 오는가 router에서 설정한 /:id/:item/:key 이녀석들이 params였다! 사용법 react-router 에서는 next 에서는