[Fix] 캐스퍼 쇼케이스 화면 로딩 오래 걸리는 오류 수정

[jhj2713]

🖥️ Preview

2024-08-05.5.50.27.mov

close #95

✏️ 한 일

• CasperFlipCard 불필요한 리렌더링 제거
• lazy loading 사용해서 화면에 보이는 컴포넌트만 렌더링되게 수정

❗️ 발생한 이슈 (해결 방안)

애니메이션 시 불필요한 리렌더링 발생으로 버벅이는 현상

2024-08-05.4.35.24.mov

카드에 hover가 될 때마다 카드에 flip 애니메이션이 발생해야하는데, 이때 관련 없는 다른 컴포넌트들에도 리렌더링이 발생하면서 flip 애니메이션이 버벅이는 현상이 있었다.

문제는 리스트를 뿌려주는 컴포넌트에서 hover 된 시점의 x를 저장하고 업데이트 하는 로직을 담당하고 있는데, 그렇다 보니 hover 될 때마다 상태가 바뀌게 되었고, 자식 컴포넌트인 CasperFlipCard 컴포넌트의 리렌더링도 발생한 것이다.

function CasperFlipCard({ size, card, isFlipped }: CasperFlipCardProps) {
  ...
}

export default memo(CasperFlipCard);

react에서 제공하는 memo를 사용해서 props가 변할 때만 리렌더링이 발생하게 수정했다.

2024-08-05.4.35.42.mov

초기 렌더링 시 너무 많은 컴포넌트를 렌더링하는 문제

2024-08-05.5.47.03.mov

showcase 화면으로 넘어갈때 시간이 너무 많이 걸리는 문제가 있었다. 살펴보니 컴포넌트 목록이 100개가 되면서 한 번에 너무 많은 컴포넌트를 렌더링하면서 생기는 문제였다.

navigate 버튼 클릭 1722847626460
showcase load 완료 1722847627011
=> 551

시간을 계산해보니 약 0.6 초가 걸렸다.

문제를 해결하기 위해서 처음에 모든 컴포넌트를 렌더링하지 않고 화면에 보일 때만 렌더링 하게 하기 위해서 IntersectionObserver를 활용했다. viewport와 DOM의 변화를 감지해서 DOM이 보여야하는 위치에 다다랐을 때 렌더링을 할 수 있도록 해줬다.

2024-08-05.5.46.28.mov

navigate 버튼 클릭 1722847591698
showcase load 완료 1722847591728
=> 30

초기 로딩 시간이 0.03초로 시간이 줄어들었다.

❓ 논의가 필요한 사항

[github-actions]

빌드를 성공했습니다! 🎉

[sooyeoniya]

IntersectionObserver 사용해서 lazy loading 구현하셨군용! 🤓