⭐ 브라우저 Dom 생성 과정

@ 렌더링 과정

• HTML 파싱 및 DOM 트리 구축

• CSS 파싱 및 CSS-DOM 트리 구축

• 렌더 트리 구축

• 레이아웃 / 리플로우

• 페인트

@ 성능 향상 방법

• DOM 조작 최소화

  
  DOM 조작은 비용이 크므로, 가능한 한 줄여야 함

• 리플로우 및 리페인트 최소화

  
  CSS 변경은 가능한 한 한번에 처리, 레이아웃 스타일 변경 줄여야 함

• 이미지 최소화

  
  이미지 크기를 줄이고, 적절한 형식을 사용

• 자바스크립트 비동기 로딩

⭐ React Dom 생성 과정

@ 렌더링 과정

• 컴포넌트 렌더링

  
  컴포넌트가 렌더링될 때
  => Virtual DOM 업데이트

• Diffing 알고리즘

  
  이전 Virtual DOM 과 새 Virtual DOM 비교

• 실제 DOM 업데이트

  
  변경된 부분만 실제 DOM에 반영

@ 성능 향상 방법

• 컴포넌트 최적화

  
  useEffect, React.memo 등을 사용하여 불필요한 렌더링 방지

• 키 사용

  
  리스트 렌더링 시, 각 항목에 고유한 키를 부여하여 재렌더링 효율 UP

• 상태 관리 최적화

  
  상태 관리 라이브러리를 적절히 사용하여 컴포넌트 간 상태 공유 효율적으로 관리

• 코드 분할과 레이지 로딩

  
  React.lazy 와 Suspense 를 사용하여 컴포넌트의 코드 분할 및 레이지 로딩 구현