📍시작

Loading 관련 코드 수정하기 위해 디버깅 작업 중
무한 스크롤 시 이전 동일한 데이터의 카드 컴포넌트가 리렌더링되는걸 확인하게 되었다.

이를 기반으로 학습했던 메모이제이션에 대해 적용해 보려고 한다.

React.memo?

메모이제이션 하기 전에 React.memo가 무엇인지 간략하게 알고가자.

• React.memo는 클래스형 컴포넌트, 함수형 컴포넌트 둘 다 사용할 수 있다.
  -> (useMemo, useCallback은 hook으로 함수형 컴포넌트에서만 사용할 수 있다.)
• 컴포넌트 자체를 메이모이제이션하는 것으로 컴포넌트가 동일한 값을 반환할 경우 이를 기억하고 이전 값을 반환한다.

공부했던 내용으로 혹시 틀린 개념이 있다면 말씀해주세요!

🤔 어떤 문제점이 발생했는지?

무한 스크롤 시 이전에 있던 카드 컴포넌트가 렌더링 된 이후에 불러온 컴포넌트가 불러와진다.

React Query로 데이터를 불러오고 있기에 캐싱되는 줄 알았으나,
아무래도 무한 스크롤은 React Query에서 제공하는 hook을 사용하지 않고
다른 방식으로 구현해서 그런듯 싶다.

이점에 대해선 React Query로 코드를 수정 후 다시 확인해 봐야겠다.

또한, state는 동일 한 값을 호출해도 리렌더링 되는 문제점을 가지고 있어,
메모이제이션 작업이 필요하다.

React.memo 추가하기

// memo import하기
import { memo } from 'react';
.
.
.
const PokeInfoCard = ({ name }: { name: string }) => {
.
.
.
  return (
    <>
      <PokemonDetail name={name} />
      <PokeCardContainer id={name} onClick={() => handlerModal(name)}>
        <TextWrap>
          <NumText>no. {pokeData?.id}</NumText>
          <NameText>{pokeName}</NameText>
          <TypeBox>
            {pokeData?.types.map((el: TypesT, idx: number) => <TypeText key={idx} typename={el.type.name} />)}
          </TypeBox>
        </TextWrap>
        <Img src={pokeData?.sprites.front_default} loading="lazy" alt={pokeData?.name} />
        <BgImg>
          <Pokeball color="#f5f5f5" />
        </BgImg>
      </PokeCardContainer>
    </>
  );
};

// 메모이제이션할 컴포넌를 memo의 인자로 추가하기
export default memo(PokeInfoCard);

동일한 카드 컴포넌트를 리렌더링 하고 있기에 이를 막기 위해
React.memo를 추가했다.

추가하는 방법은 최하단에 memo(컴포넌트) 형식으로 작성하는 방식도 있으며,
함수컴포넌트에 useMemo 등의 형식으로 작성하는 방식도 있다.

이후 확인했을 때 동일한 컴포넌트는 리렌더링 되지 않는 것을 볼 수 있다.

👀 주의할 점

단, 메모이제이션은 이전의 값을 미리 저장해 두기 때문에 그만큼 메모리 소모가 된다.

개발자는 어플리케이션을 개발할 때 해당 요소가 불필요하게 리렌더링되고,
이를 통해 서버에 크게 부하를 주는 요소인지 체크하여 메모이제이션해야한다.

✏️ 마치며

사실 다른거 수정하려다 불필요한 렌더링이 발생하고 있어, React.memo를 적용해 보았다.

포켓몬API를 무료로 제공하고 있으며 누군가 추가 및 삭제할 수 없는 데이터이다.
그런점에서 메모이제이션을 해도 괜찮다 생각하여 적용해 봤다.

아마 React Query에서 제공하는 hook을 사용해
무한 스크롤 로직을 수정하게 된다면 굳이 메모이제이션 할 필요가 없지 않을까 싶다.

이 점에 대해선 추후 리팩토링 후 포스팅해야겠다.