📝Day(50) 76일차 WE_MOTIVATION_DIARY

김민재·2021년 10월 7일

MOTIVATION_DIARY

빡코딩 다이어리

목록 보기

73/87

- 지금까지 구현 현황

데이터를 20개 씩 잘라서 보여지는 기능 구현

- TODAY I LEARN ERROR 🦠

무한 스크롤 시 받아온 데이터를 다 로딩하면 화면이 처음으로 돌아가는 에러를 만났다.
데이터를 20개 씩 잘라서 받아오는 fetchMoreData() 메소드 호출하고 이후 목데이터에 있는 개수만큼 도달하면 checkScrollEnd() 함수를 호출해 로딩이미지는 없애고 GOTOTOP 버튼을 생기도록 로직을 구현하였음
그러나 화면 끝에 다달으면 화면이 멈추면서 데이터를 저장한 state 값이 초기화되면 원하는 대로 동작하지 않는다.

<script>
// 무한 스크롤 함수를 초기화하는 함수
checkScrollEnd() {
    const { listData, loading, noData } = this.state;
    this.setState({
      noData: !noData,
      loading: !loading,
      listData: listData,
    });
  }
// 무한 스크롤 함수
handleInfiniteScroll = () => {
  const { totalNumDataFetched, loading } = this.state;
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  let scrollsHeight = scrollHeight;
  let scrollsTop = scrollTop;
  let clientsHeight = clientHeight;
  const isItEndScroll = scrollsTop + clientsHeight === scrollsHeight;
  if (isItEndScroll) {
    this.setState({
      loading: !loading,
    });
    setTimeout(() => {
      this.setState({
        currentDataNum: totalNumDataFetched,
        totalNumDataFetched: totalNumDataFetched + 10,
      });
      this.fetchMoreData();
    }, 1000);
  }
};
</script>

- HOW TO FIX MY ERROR 💊

[세션에서 배운 것]

라이프 사이클 부모-자식 컴포넌트에서 실행되는 순서

조건부 렌더링의 개념과 사용법에 대해서

ERROR 해결을 위한 부모-자식 컴포넌트 간의 라이프사이클 순서🔑

라이프사이클 순서🔑 - 지금 데이터를 추가적으로 불러오는 상황에서 여러 메소드들이 실행되고 있어 렌더되는 순서를 다시 한 번 파악하여 오류를 잡아야겠다.

조건부 렌더링🗝 - 렌더링에 있어 조건을 부여해 오류가 발생하지 않도록 막도록 코드를 짜는 것

수정된 코드
<script>
fetchMoreData() {
    const LIST_API = '/data/ProductList/PRODUCT_LIST_DATA.json';
    const { totalNumDataFetched, currentDataNum, loading, noData } = this.state;
    fetch(LIST_API)
      .then(res => {
        return res.json();
      })
      .then(data => {
        if (data.LIST_DATA.product.length !== totalNumDataFetched) {
          return this.setState({
            listData: data.LIST_DATA.product.splice(
              currentDataNum,
              totalNumDataFetched
            ),
          });
        } else {
          console.log('event');
          this.checkScrollEnd();
        }
      })
      .catch(console.error);
  }
 </script>

- 모르는 점

[프로젝트 진행하면서 배운 키워드]

무한 스크롤을 구현하기 위해서 찾아본 자료 중 데이터를 받는 axios🔑와 fetch🔑 메서도의 차이점에 대해서
무한 스크롤을 계산하는 로직을 짜기 위해 필요한 스크롤 메서드 3개,
scrollTop, scrollHeight, clientHeight🗝

- 배운점

axios🔑는 json기반이라서 json()메서도를 안써줘도 된다는 점과 추가적인 기능을 제공하고 있다는 것

`scrollTop, scrollHeight, clientHeight🗝 각각 현재 스크롤 위치, 총 스크롤 길이, 웹 페이지의 요소가 차지 하는 높이값을 나타낸다.

- 잘한 점과 개선할 점

오늘 PEER_REVIEW를 진행하면서 내 코드를 남들이 볼 수 있을 정도로 명확하게 짜야한다는 사실을 께달았다.

어떻게 하면 명확하고 팀원들이 봐도 이해할 수 있는 코드로 짤 수 있는지 항상 명심한 채 한줄 한줄 적어보자.

끝까지 기능 구현을 하고 잔 점! 그러나 컨디션 관리를 위해 오늘은 무조건 12시에 잔당..!