[Weekly Paper] React Life Cycle, 렌더링 방식 (CSR, SSR, SSG)

1️⃣ 리액트 생명주기(life cycle)에 대해 설명해 주세요.

React Life Cycle이란?

React는 컴포넌트 기반의 View 중심인 라이브러리로, 각각의 컴포넌트에는 고유한 라이브사이클(생명주기)이 존재합니다. 컴포넌트의 생명주기는 보통 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 종료됩니다. 이를 통해 React는 컴포넌트 생성, 업데이트, 그리고 제거될 때마다 특정 작업을 수행할 수 있는 기회를 제공합니다.

 

React 라이프사이클은 크게 세 단계로 나눌 수 있습니다.

 

Mounting (마운트)

컴포넌트가 처음 생성되어 DOM에 삽입되는 단계입니다. componentDidMount와 같은 메서드를 통해 초기화 작업을 수행할 수 있습니다.

 

Updating (업데이트)

컴포넌트가 props나 state가 변경되어 다시 렌더링 되는 단계입니다. componentDidUpdate 메서드 등을 사용하여 업데이트된 상태를 기반으로 추가 작업을 수행할 수 있습니다.

 

Unmounting (언마운트)

컴포넌트가 DOM에서 제거되는 단계입니다. 이 단계에서 componentWillUnmount 메서드를 사용해 리소스를 해제하거나, 정리 작업을 수행할 수 있습니다.

 

React는 이 라이프사이클 단계들을 통해 컴포넌트의 생명주기를 관리하고, 개발자가 각 단계에서 필요한 작업을 지정할 수 있도록 합니다.

---

2️⃣ 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.

Server Side Rendering vs Client Side Rendering

Client-Side Rendering (CSR)

CSR 방식은 초기 HTML을 최소한으로 로드한 후, 자바스크립트를 브라우저에서 실행하여 나머지 콘텐츠를 가져와 렌더링하는 방식입니다. 페이지가 처음 로드될 때는 빈 HTML 틀이 전달되며, 이후 자바스크립트가 서버에서 데이터를 받아와 콘텐츠를 동적으로 구성합니다. React, Vue와 같은 프론트엔드 프레임워크가 주로 CSR 방식을 사용합니다.

 

장점

• 첫 페이지 로딩 후 화면 전환이 매우 빠르고, 사용자와의 상호작용이 원활하게 이루어집니다.
• 한 번 로드된 후에는 데이터만 가져와 업데이트하기 때문에 사용자 경험이 부드럽습니다.

단점

• 초기 로딩 속도가 느려질 수 있으며, 첫 로딩이 완료될 때까지 빈 화면이 나타날 수 있습니다.
• HTML이 브라우저에서 생성되므로, 검색 엔진 최적화(SEO)가 어려울 수 있습니다.

사용하기 좋은 상황

• 대화형 웹 애플리케이션
• 빠른 사용자 경험이 중요한 SPA(Single Page Application)
• SEO가 크게 필요하지 않은 내부 애플리케이션 또는 회원제 서비스

---

Server-Side Rendering (SSR)

SSR 방식은 서버에서 HTML을 생성해 브라우저로 전달하는 방식으로, 요청이 있을 때마다 서버에서 페이지를 즉시 렌더링하고 완성된 HTML을 전송합니다. Next.js와 같은 프레임워크는 SSR을 지원하며, 사용자가 페이지를 요청할 때마다 새로 HTML을 생성합니다.

 

장점

• 초기 로딩 속도가 빠르고, 완성된 HTML을 브라우저에 전달하므로 검색 엔진 최적화(SEO)에 매우 유리합니다.
• 최신 데이터가 필요할 때, 실시간 데이터를 화면에 반영하기 좋습니다.

단점

• 서버 요청이 많아질수록 서버 부하가 증가할 수 있습니다.
• 사용자가 상호작용할 때마다 서버에 요청하므로, 대화형 애플리케이션에서는 반응 속도가 느려질 수 있습니다.

사용하기 좋은 상황

• SEO가 중요한 웹 사이트
• 로그인 및 맞춤형 콘텐츠가 필요한 웹 애플리케이션
• 최신 데이터가 중요한 실시간 정보 제공 웹 사이트

---

Static Site Generation(SSG)

SSG 방식은 빌드 시점에 HTML 파일을 미리 생성하여 서버에 배포하는 방식으로, 모든 사용자에게 동일한 정적 HTML 파일을 제공합니다. 사용자가 페이지를 요청하면 서버 또는 CDN에서 미리 생성된 HTML 파일을 빠르게 전송할 수 있습니다. Gatsby, Next.js는 SSG를 지원합니다.

 

장점

• 미리 생성된 파일을 전달하므로, 초기 로딩 속도가 매우 빠르고 서버 부담이 적습니다.
• 정적 파일을 사용하므로 보안성이 높고, SEO에 유리합니다.
• 서버 요청 없이 CDN에서 빠르게 제공할 수 있어, 전 세계 사용자에게 빠르게 페이지를 전달할 수 있습니다.

단점

• 동적인 데이터를 실시간으로 처리하기 어려워, 변경이 잦은 페이지에는 적합하지 않습니다.
• 빌드 시점에 모든 페이지를 생성해야 하므로, 대규모 웹 사이트에서는 빌드 시간이 길어질 수 있습니다.

사용하기 좋은 상황

• 정적 콘텐츠가 주를 이루는 웹 사이트
• 콘텐츠가 자주 변경되지 않는 랜딩 페이지나 정보 제공 사이트
• SEO가 중요한 콘텐츠 중심 웹 사이트