react 렌더링 최적화( 이미지, lazy, 코드 로직 수정 )

문제

• 순조롭게 프로젝트를 진행하던 도중 한 페이지가 너무 늦게 렌더링 되는 것을 발견했다. (네트워킹 탭만 봐도 약 11초)

load 11.70s ?!

 

문제 원인

• 해당 페이지가 모든 컴포넌트를 보여줘야 되는 페이지이기 때문에 모든 컴포넌트를 불러오는 과정에서 많은 시간이 쓰인다.
• 아래와 같이 많은 컴포넌트를 불러와야 했다.

 

문제 해결

• 컴포넌트를 직접 불러오지 않고 이미지로 대체했다.
• 이미지로 대체했지만 모든 컴포넌트가 불러와졌다.
  • filter의 영향으로 다시 불러와졌다고 생각해서 filter대신 배열의 인덱스로 원하는 요소의 인덱스 값으로 해당 컴포넌트만 불러오는 것으로 해결했다.
  • 데이터에 lazy와 suspense를 사용하여 필요한 부분만 렌더링할 수 있도록 했다.

load 168ms !

 

부록

• 메인 페이지에서 모든 컴포넌트가 불러와지기에 lazy와 suspense를 사용하여 렌더링의 속도를 줄여줬다.

 

(전)

 

(후)