[2차 협업프로젝트 TIL] 4일차 회고

 

4일차 진행상황

 

오늘 팀원들과 데일리스크럼을 하며 공유한 사항은 다음과 같다.

• 신규 PR 확인 및 merge
• 기존 작업사항에 개선사항 반영 및 신규 개선사항 반영 작업
• 페이지 공통컴포넌트 및 페이지 작업 진행

오늘 최종 merge 후 결과물을 보니 상당히 많이 진행됐음을 알 수 있었다.

 

팀원분들이 적극적으로 의견을 공유하고, 사소한 부분이더라도 적극적으로 소통하는 팀을 원했는데, 많이 도와주셔서 팀원분들에게 감사함을 느낀다.

 

4일차에 배운 점

 

💡 무한스크롤 적용

지금까지 무한스크롤을 적용하는 것을 배우며 자바스크립트 코드로만 사용해봤지 리액트에 적용해본 적은 없었다.

 

이번에 내가 맡은 페이지도 무한스크롤이 들어있어서 공부해보고 싶어서 고른 페이지이긴 하지만, 막상 만들어보니 잘 선택했다는 생각이 들었다.

useEffect(() => {
    observeRef.current = new IntersectionObserver((entries) => {
      const lastCardItem = entries[0];
      console.log("IntersectionObserver 호출");
      if (lastCardItem.isIntersecting && hasMore) {
        loadMoreCardItem();
      }
    });

    if (loadingRef.current) {
      observeRef.current.observe(loadingRef.current);
    }

    return () => {
      if (loadingRef.current) {
        observeRef.current?.unobserve(loadingRef.current);
      }
    };
  }, [hasMore]);

 

위 코드는 무한스크롤을 구현하면서 useEffect 내에 있는 중요 부분만 가져온 코드이다.

 

다른 부분들도 다 중요하지만 이 부분이 제일 핵심이었던 것 같다.

 

이 무한스크롤은 IntersectionObserver를 사용했다. 옵저버를 사용해 사용자의 스크롤을 관찰하다가 어느 위치에 다다라서 다음 데이터를 불러오는 요소에 다다르면 연이어 추가데이터를 가져오는 방식을 구현할 수 있다.

 

여기서 다음 데이터를 불러오는 요소는 loadingRef가 참조하는 div 요소이며, 한번에 로딩되는 데이터의 끝에 자리잡고 있게 된다.

 

이 div가 화면에 보이면 observeRef.current.observe(loadingRef.current)를 통해 해당 요소를 관찰한다.

 

또, hasMore는 불러오는 데이터가 끝에 다다르면 false가 되고, 그 외에는 true 값이어서, 이 값이 무한스크롤이 진행되며 계속 업데이트된다.

 

그래서 이벤트의 지속여부를 결정할 수 있는 값으로 사용할 수 있다.

 

향후 프로젝트 계획 및 기대사항

 

점점 프로젝트 진행도가 증가하고 있다. 사용할 수 있는 부분이 많아져서 공용컴포넌트의 적용 및 테스트를 기능 구현을 하며 해봐도 될 것 같다.