[React] 리액트 성능 최적화 TODO

프론트 엔드 성능 최적화 키워드로 구글에 검색을 하게 되면 이론부터 시작하여 정말 무수히 많은 자료와 레퍼런스들이 있습니다. 웹 브라우저의 동작원리부터 시작하여 차근차근 성능 최적화가 무엇이고 왜 필요한지에 대하여 자세한 내용들이 나와져 있습니다. 개발에서는 원리를 알아야 그 행위를 하는것에 의의가 있는것이 맞다고 생각합니다. 최적화란 단순하게 생각하여 사용자에게 좀 더 빠르고 더 나은 UI/UX를 제공해주는 것이라 생각합니다.

 

개발 시 체크하면 좋은 내용

1. React 최적화

• useMemo
• useCallback
• 가상화 list(react-window, react-virtualized)
• pure component
• 함수 memoization
• redux reselect
• lazy loading
• memo
• shouldComponentUpdate
• HOF
• Tree Shaking

2. Next.js 최적화

• next/image 컴포넌트 사용하여 이미지 최적화

• next/image squoosh를 sharp로 변경

• ISR을 사용하여 빌드 속도 개선 & SSG 대신 ISR을 사용하여 정적 최신데이터 캐싱

• next/link 컴포넌트를 이용한 SEO 최적화 및 prefetch 하기

• next/dynamic 컴포넌트를 이용한 빌드 속도 & 로딩 속도 개선

3. Promise.all

API 호출이 빈번하고 여러번 수행 하게 될 시 애플리케이션에 성능에 영향을 끼치게 됩니다. 메인화면에서 3-5개 이상의 API를 호출하게 될 시 Promise.all을 사용하여 병렬로 데이터 로드를 처리하여 데이터 로드시간을 단축하여 성능을 향상 시킬 수 있습니다.

 

4. Lighthouse

크롬에서 제공해주는 Lighthouse를 통해서 우리가 만든 애플리케이션의 성능 지표를 테스트 해볼 수 있습니다.

웹 페이지의 성능, 접근성 및 검색 엔진 최적화 등을 체크해줍니다. 개발모드와 실제 배포 후 성능점수가 다를수 있습니다.