자바스크립트 + 리액트 디자인 패턴

336

자바스크립트 + 리액트 디자인 패턴

그럼 다음 절에서는 다양한 렌더링 패턴에 대해 자세히 다룰 것입니다.

13.2

클라이언트 사이드 렌더링(

CSR

)

이전 장에서 리액트를 사용한

CSR

에 대해 이미 다룬 바 있습니다. 다른 렌더링 패턴과의 연

관성을 돕기 위해 간략하게 다시 살펴보겠습니다.

리액트의

CSR

에서는 대부분의 애플리케이션 로직이 클라이언트에서 실행되며, 데이터를 가

져오거나 저장하기 위한

API

호출로 서버와 상호작용합니다. 따라서 거의 모든

UI

가 클라이

언트에서 생성되며, 전체 웹 애플리케이션은 처음 요청 시에 모두 로드됩니다. 사용자가 링

크를 클릭하여 탐색할 때 페이지 렌더링을 위한 새로운 요청을 서버로 보내지 않습니다. 대

신 클라이언트에서 코드가 실행되어 뷰나 데이터를 갈아끼웁니다.

CSR

은 페이지 새로고침 없이 탐색을 지원하는

SPA

를 구축할 수 있게 하여 뛰어난 사용자 경

험을 제공합니다. 뷰 변경에 사용되는 데이터가 제한적이므로 페이지 간 라우팅이 더 빠른

편이며, 이로 인해 더 반응성이 뛰어난 것처럼 보입니다.

하지만 이미지 표시, 데이터 저장소에서 데이터 가져오기, 이벤트 처리 등 페이지의 복잡

성이 증가하면 페이지 렌더링에 필요한 자바스크립트 코드의 복잡성과 크기도 증가합니

다.

CSR

은 큰 자바스크립트 번들을 만들도록 하여 페이지의

FCP

First

Contentful

Paint

와

TTI

Time

to

Interactive

를 증가시킵니다. 또한 큰 요청 객체와

API

응답과 같은 일련의 네트워크 요청으로 인