돔, 가상돔, 컴포넌트, CSR, SSR

돔 DOM

먼저, DOM은 html, body, div와 같은 태그들을 javascript가 이용할 수 있게 브라우저가 HTML 문서의 구조를 메모리에 트리 구조로 표현한 객체 모델이다.

 

즉, javascript 코드를 실행하면 D 따라서 사용자는 콘텐츠는 누락된 텅 빈 로딩 화면을 볼 수 있게 된다. 이후 데이터 쿼리 동작을 수행하며, 서버로부터 데이터를 받아와 빈 공간들을 채워 웹페이지를 완성하게 된다. OM 객체를 생성하여 HTML/CSS와 같은 기본 ‘뼈대’ 역할을 하는 렌더 쉘을 생성한다.

 

이러한 과정을 따르는 것이 CSR이다. client side rendering의 약어로 빈 페이지를 생성하고 이후에 서버로부터 데이터를 받아 온전한 페이지를 반환한다.

이 과정에서 발생되는 문제는 빈번한 DOM 조작으로 인한 성능 저하 문제다. 트리 구조로 생성된 DOM은 조작 시에 브라우저의 레이아웃 재계산(Reflow)과 화면 재그리기(Repaint)를 유발할 수 있으며, 자원을 많이 소모하게 된다.

 

React는 문제를 해결하기 위해 가상 돔(virtual DOM) 도입으로 DOM을 추상화해 문제를 해결한다.

 

 

가상 돔에서는 컴포넌트의 변경이 발생하면, 변경된 부분을 가상 돔에 업데이트하고 가상 돔끼리 비교(diffing)하여 변경된 부분만 실제 돔에 적용(patching)한다. 이를 통해 돔 변경의 빈도수를 줄이고 성능 최적화를 이룰 수 있다.

 

컴포넌트

컴포넌트는 웹 어플리케이션 개발에 필요한 UI를 아래와 같은 기준에 따라 설계하고 관리하는 코드 블록이다.

• 재사용 가능하도록 설계: Input, Button 등 다양한 페이지에서 같은 컴포넌트를 사용한다. → 생산성
• 독립적으로 설계 : 다른 컴포넌트와의 의존성을 줄여 독립적으로 관리한다. → 유지보수
• 조합할 수 있도록 설계: 작게 설계하여 조합을 통해 큰 기능을 가진 컴포넌트를 생성한다. → 확장성

컴포넌트에서 서버와 클라이언트 간의 상호작용

 

useEffect(() => {
  fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => setData(data)); // 상태 업데이트
}, []); // 빈 배열은 컴포넌트가 마운트될 때만 실행되도록 함

 

etch는 비동기적으로 서버에 데이터를 요청하고 받을 수 있는 함수이다.

React 컴포넌트가 마운트될 때 useEffect 훅을 사용하여 데이터를 요청할 수 있다.

클라이언트 컴포넌트와 서버 컴포넌트

React 18버전 이전까지는 주로 클라이언트 컴포넌트만 이용하며, 페이지의 동적인 부분들을 관리해왔다. 그러나 JS번들의 크기가 커지면서 브라우저의 파싱과 실행 시간을 늘어났으며, 이는 사용자 경험의 저하 문제를 일으켰다.

React 18에서 도입된 서버 컴포넌트는 초기 로딩 성능을 향상시키고, 데이터 페칭 및 템플릿 렌더링 같은 작업을 서버에서 처리하며 문제를 해결했다.

 

 

Next.js와 같은 메타 프레임워크(React를 기반으로 구축된 프레임워크)는 미리 데이터 쿼리와 렌더링을 서버 사이드에서 수행하기 때문에 정적 사이트 생성(SSG) 또는 서버 사이드 렌더링(SSR) 방식을 구현할 수 있다.