렌더링 성능 향상 위해 어떻게 해야 하는가

 

 

 

 

웹 애플리케이션의 렌더링 성능을 향상시키기 위해서는 여러 전략과 기술을 적절히 활용해야 한다

React와 같은 모던 웹 프레임워크를 사용하는 경우, 특히 주의 깊게 고려해야 할 몇 가지 방법들이 있다

 

1. 불필요한 렌더링 방지

• shouldComponentUpdate와 React.PureComponent
  • 클래스 컴포넌트에서 shouldComponentUpdate 메소드를 오버라이딩하거나 React.PureComponent를 상속받음으로써 불필요한 렌더링을 줄일 수 있다
  • 이들은 컴포넌트의 props나 state가 실제로 변경되었을 때만 리렌더링을 허용한다
• React.memo
  • 함수형 컴포넌트에서는 React.memo를 활용하여 컴포넌트의 출력이 동일한 props에 대해 동일하다는 것을 보장함으로써 불필요한 렌더링을 방지할 수 있다

2. useMemo와 useCallback 사용

• useMemo
  • 복잡한 계산이나 결과가 자주 바뀌지 않는 연산의 결과를 메모이징함으로써, 컴포넌트의 성능을 향상시킬 수 있다
• useCallback
  • 함수를 메모이징하여, 자식 컴포넌트에 props로 전달되는 콜백 함수가 불필요하게 재생성되는 것을 방지한다

3. Fragment와 조건부 렌더링 사용

• Fragment
  • 불필요한 DOM 노드의 추가를 방지하여 성능을 최적화한다
  • Fragment를 사용하면 불필요한 래퍼(div 등) 없이 그룹화할 수 있다
• 조건부 렌더링
  • 필요할 때만 컴포넌트나 요소를 렌더링하도록 하여 렌더링 작업을 최소화한다

4. 이미지와 자원 최적화

• 이미지 최적화
  • 이미지를 적절한 크기로 리사이징하고, 필요한 경우 레이지 로딩을 적용한다
• 코드 스플리팅
  • React.lazy와 같은 기술을 활용하여, 사용자에게 필요한 기능만을 처음에 로드하고, 나머지는 필요에 따라 동적으로 로드

5. 서버 사이드 렌더링 (SSR) 또는 정적 사이트 생성 (SSG)

• SSR과 SSG
  • 초기 로딩 성능을 향상시키고, 검색 엔진 최적화(SEO)를 개선하기 위해 서버 사이드 렌더링이나 정적 사이트 생성을 적용할 수 있다

6. 웹팩 등의 도구 활용

• 트리 쉐이킹
  • 사용하지 않는 코드를 제거하여 번들의 크기를 최소화
• 압축과 최적화
  • 자바스크립트, CSS 파일을 압축하고, 필요한 경우 코드를 분할하여 애플리케이션의 로딩 시간을 단축

 

렌더링 성능 최적화는 사용자 경험을 크게 개선할 수 있으므로,

애플리케이션 개발 과정에서 매우 중요한 고려사항이다

다양한 전략을 적절히 조합하여 사용하면, 더 빠르고 반응성 좋은 웹 애플리케이션을 만들 수 있다