시작

포켓몬 API를 활용해 포켓몬 데이터를 불러오고 있었다.

---

문제점 발생

무한 스크롤 구현을 위해 뷰포트 바닥에 닿을 경우 포켓몬 데이터를 추가로 Get요청을 보내도록 했다.

const PokeContList = () => {
  const [offset, setOffset] = useState<number>(0);
  const [pokemonList, setPokemonList] = useState<PokeList[]>([]);
  const LIMIT = 20;

  useQuery({
    queryKey: ['pokeList'],
    queryFn: () => upDatePokemon(),
    onSuccess(data) {
      setPokemonList(data);
    },
    onError(err) {
      console.log(err);
    },
  });

  const upDatePokemon = async () => {
    const getPokemonListData = await getPokemonList(LIMIT, offset);
    const nextPokeMonList = getPokemonListData.results;

    setOffset((prevOffset) => (prevOffset = prevOffset + LIMIT));
    setPokemonList((prevList) => [...prevList, ...nextPokeMonList]);

    return nextPokeMonList;
  };

  const eventScroll = () => {
    const { scrollHeight, scrollTop, clientHeight } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight) {
      console.log('바닥');
      upDatePokemon();
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', eventScroll);
    console.log('데이터 불러오기');
    return () => {
      window.removeEventListener('scroll', eventScroll);
    };
  }, [pokemonList]);

  console.log('카드 컴포넌트리스트');

  return (
    <PokeContainer>
      {pokemonList && pokemonList.map((pokemon) => <PokeInfoCard key={pokemon.name} name={pokemon.name} />)}
    </PokeContainer>
  );
};

export default PokeContList;

보는거와 같이 콘솔창에 데이터 불러오기가 여러번 찍히는걸 볼 수 있다.

useEffect는 현재 의존성 배열로 pokemonList를 가지고 있다.
따라서, 처음 렌더링 된 이후 pokemonList의 값이 변경되면 useEffect가 실행된다.

초기 화면 진입 시 데이터가 바로 불러와 지지 않으니
뷰포트 바닥이 바로 노출 되면서 eventScroll 함수가 실행되어 불필요한 데이터가 호출 이슈가 발생했다 생각했다.

초반에는 useEffect에 조건을 걸어 봤지만
조건이 충족되지 않아 무한 스크롤이 실행되지 않았다.

---

🛠️ 스켈레톤을 추가해 보자.

어떻게 해결하지? 라는 생각으로 한참 고민하던 중 스켈레톤을 생각하게 되었다.

스켈레톤=뼈대

페이지 콘텐츠가 완전히 렌더링되기 전에 나타나는 화면, 최종 콘텐츠가 제자리에 로드되기 전에 페이지 구조의 윤곽을 나타내는 연한 색상의 배경, 선 및 텍스트로 구성
[React] 스켈레톤 로딩이란? - by07a님

말하자면 내가 보여주려고 하는 컨텐츠와 동일한 사이즈로 만들어진 회색 컨포넌트를 데이터가 로딩 될 때 까지 화면에 표시하는 것을 말한다.

import styled, { keyframes } from 'styled-components';

const load = keyframes`
  100% {
    background-position: -100% 0;
  }
`;

const SkeletonWrap = styled.div`
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(90deg, #e5e5e5 30%, #f0f0f0 30%, #f0f0f0 30%, #e5e5e5 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: ${load} 1.5s infinite;
  /* box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.1); */
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 1;
  cursor: pointer;
  transition: 0.3s;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-color: #ccc;
`;

const SkeletonCard = () => {
  return (
    <>
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
      <SkeletonWrap />
    </>
  );
};

export default SkeletonCard;

적은 갯수로 구성하려고 했지만
뷰포트 바닥이 계속 닿는 문제가 발생해 12개의 카드 컴포넌트를 만들어 배치했다.

애니메이션 효과는 구글링을 통해 가져와 색상 배치를 커스터마이징해 수정했다.

---

🥹 무한 스크롤 감지의 문제가 아니였다...?

그러고 다시 콘솔창을 확인해 봤는데 동일하게 나왔다...

뷰포트가 바닥에 닿기 전에 스켈레톤을 보이게 했지만 그 문제가 아니었던 것 같아
useEffect 코드를 다시 확인해 보자.

  const [offset, setOffset] = useState<number>(0);
  const [pokemonList, setPokemonList] = useState<PokeList[]>([]);
  const LIMIT = 20;

  useQuery({
    queryKey: ['pokeList'],
    queryFn: () => upDatePokemon(),
    onSuccess(data) {
      setPokemonList(data);
      console.log('useQuery 실행');
    },
    onError(err) {
      console.log(err);
    },
  });

  const upDatePokemon = async () => {
    const getPokemonListData = await getPokemonList(LIMIT, offset);
    const nextPokeMonList = getPokemonListData.results;

    setOffset((prevOffset) => (prevOffset = prevOffset + LIMIT));
    setPokemonList((prevList) => [...prevList, ...nextPokeMonList]);
    console.log('upDatePokemon 실행');

    return nextPokeMonList;
  };

  const eventScroll = () => {
    const { scrollHeight, scrollTop, clientHeight } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight) {
      console.log('바닥감지 업데이트');
      upDatePokemon();
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', eventScroll);
    console.log('데이터 불러오기');
    return () => {
      window.removeEventListener('scroll', eventScroll);
    };
  }, [pokemonList]);

  console.log('카드 컴포넌트리스트', pokemonList);

각각의 구간에 console.log를 추가해 확인하기로 했다.

🔎 문제점 발견!

useEffect의 의존성 배열에 추가되어 있는 pokemonList의 상태가 변경하면 useEffect 내부의 코드가 실행된다.
처음에는 pokemonList가 빈배열로 시작 되는데 여기서 useEffect가 두번 실행하는 것 같다.

useQuery를 통해 upDatePokemon()이 실행되고 pokemoList에 데이터가 들어오게 된다.
여기서 세번째 useEffect가 실행 되는 것 같았다.

즉, pokemonList가 빈배열일 경우에는 useEffect가 실행되지 않도록 해야한다.

---

🥹 해결!

useEffect(() => {
  if (pokemonList.length > 0) {
    window.addEventListener('scroll', eventScroll);
    console.log('데이터 불러오기');
    return () => {
      window.removeEventListener('scroll', eventScroll);
    };
  }
}, [pokemonList]);

직관적으로 표시할 수 있게 pokemonList배열의 길이가 0보다 클 경우 useEffect 내부 코드가 실행하게 조건문을 추가했다.

다시 콘솔창을 확인하니 useEffect가 불필요하게 두번 실행되는 문제가 해결된 걸 볼 수 있었다...!

🛠️ 리팩토링

useEffect(() => {
    const eventScroll = () => {
      const { scrollHeight, scrollTop, clientHeight } = document.documentElement;

      if (scrollTop + clientHeight >= scrollHeight) {
        console.log('바닥감지 업데이트');
        upDatePokemon();
      }
      console.log('바닥감지 실행');
    };

    if (pokemonList.length > 0) {
      window.addEventListener('scroll', eventScroll);
      console.log('데이터 불러오기');
      return () => {
        window.removeEventListener('scroll', eventScroll);
      };
    }
  }, [pokemonList]);

그리고 eventScroll는 pokenomList의 배열 길이가 0이상인 경우, 스크롤이 바닥에 닿을 경우에만 실행되기에 useEffect 내부에 같이 묶어 주었다.

---

마치며

이번 시간을 통해 console.log를 잘 활용해 문제를 파악하자는 점,
useEffect를 사용할 때는 불필요한 렌더링을 막기 위해 조건문이나 의존성 배열을 추가해 주는 방법을 고려하면서 사용해야 겠다는 교훈을 얻을 수 있었다.