react 썸네일형 리스트형 React 고급 기술 익히기 - 5편: Reconciliation과 렌더링 최적화 React는 UI 업데이트를 효율적으로 수행하기 위해 Reconciliation(재조정) 과정을 사용합니다. 이 과정에서 Virtual DOM을 활용하여 변경 사항을 감지하고, 최소한의 연산으로 실제 DOM을 업데이트합니다. 이번 글에서는 Reconciliation의 원리, Virtual DOM과 Diffing Algorithm, 성능 최적화 기법을 다룹니다. 🚀1. Reconciliation(재조정)이란?**Reconciliation(재조정)**은 React가 상태(State)나 Props가 변경될 때 어떤 부분을 업데이트해야 하는지 판단하는 과정입니다. 전체 UI를 다시 그리는 대신, 변경된 부분만 찾아 업데이트하여 성능을 최적화합니다.✅ Reconciliation의 주요 특징변경된 부분만 업데이트.. 더보기 React 고급 기술 익히기 - 4편: 코드 스플리팅과 서버 사이드 렌더링(SSR) 최적화 1. 코드 스플리팅(Code Splitting) 이란?코드 스플리팅은 애플리케이션을 여러 개의 번들로 나누어 필요할 때만 로드하는 기법입니다.React.lazy와 Suspense 사용React Router와 코드 스플리팅2. 서버 사이드 렌더링(SSR)이란?SSR(Server-Side Rendering)은 React 컴포넌트를 서버에서 렌더링한 후 HTML을 클라이언트에 전달하는 방식입니다.Next.js에서 SSR 구현정적 사이트 생성(SSG)3. CSR, SSR, SSG 비교렌더링 방식방식 설명장점단점CSR (Client-Side Rendering)모든 렌더링을 클라이언트에서 수행빠른 상호작용, 서버 부담 적음초기 로딩 속도가 느림, SEO에 불리SSR (Server-Side Rendering)서버에서.. 더보기 이전 1 2 다음
