랜더링 최적화 React

[Dolphin-PC]

• [x] 랜더링 최적화 React
  • React DevTools 프로파일러를 사용한 컴포넌트 렌더링 성능 분석.
  • 리랜더링을 야기 할 수 있는 함수 useCallback으로 캐싱하기.
  • Cumputation cost가 큰 계산이 있다면 (필터 리스트 등) 리렌더링 사이의 계산 결과를 useMemo로 캐싱하기.
  • React.memo로 불필요한 리랜더링일 일어 날 수 있는 부분을 찾아 컴포넌트 메모화기.

[Dolphin-PC]

❓ React Profiler로 측정은 했는데, 어떤 지표를 봐야할 지, 어떤 걸 줄여야 할 지 감이 안옴

[Dolphin-PC]

사실 렌더링이 가장 많이 일어나는 곳은 "ProductSearchDrawer" 이다.

• 하지만, 최적화와 편의성은 항상 반비례하기에, 이곳에서는 성능최적화를 하지 않기로 했다.
  • 해당 컴포넌트는 텍스트 입력, 슬라이더 범위 변경 등 많은 렌더링이 발생하지만, 렌더링하는 컴포넌트가 작기에 최적화가 필요하지 않다고 판단했다.
  • 3개의 컴포넌트가 분리되어 zustand store를 통해 유기적인 역할을 하고 있어, 이를 최적화하기 위해서는 별도의 state로 관리해주어야 하고, 코드가 난잡해질 우려가 있다.

[Dolphin-PC]

최적화할 요소가 없어 PASS