아래 두 가지 주제에 대해서 각자 조사해서 답변을 제출해 주세요.
리액트 생명주기(life cycle)에 대해 설명해 주세요.
웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.
- 리액트 생명주기 (React Lifecycle):
리액트 컴포넌트는 다양한 생명주기 메서드를 가지고 있으며, 이를 통해 컴포넌트의 생성, 업데이트, 소멸 등의 단계에서 특정 동작을 수행할 수 있습니다. 주요 생명주기 메서드는 다음과 같습니다:
마운팅(Mounting) 단계:
constructor(): 컴포넌트가 생성될 때 호출되는 메서드로, 초기 상태를 설정하거나 메서드를 바인딩하는 용도로 사용됩니다.
render(): 컴포넌트의 UI를 렌더링하는 메서드입니다.
componentDidMount(): 컴포넌트가 실제 DOM에 삽입된 후 호출되는 메서드로, 네트워크 요청 등의 초기화 작업을 수행하기에 적절합니다.
업데이팅(Updating) 단계:
shouldComponentUpdate(): 컴포넌트가 업데이트될 때 호출되는 메서드로, 업데이트 여부를 결정할 수 있습니다.
render(): 새로운 상태나 속성에 기반하여 UI를 업데이트합니다.
componentDidUpdate(): 컴포넌트의 업데이트가 DOM에 반영된 후 호출되는 메서드로, 이전 상태나 속성에 접근할 수 있습니다.
언마운팅(Unmounting) 단계:
componentWillUnmount(): 컴포넌트가 제거되기 전에 호출되는 메서드로, 리소스 정리 등을 수행하는 데 사용됩니다.
2. 웹 페이지 렌더링 방식 (CSR, SSR, SSG):
CSR (Client-Side Rendering):
특징:
초기에는 HTML, CSS, JavaScript 파일만 받아와서 페이지를 로드하고, 이후에 데이터를 비동기적으로 가져와서 렌더링합니다.
주로 단일 페이지 애플리케이션(SPA)에서 사용됩니다.
상황:
동적인 사용자 경험을 제공하는 웹 애플리케이션에서 적합합니다.
초기 로딩 속도가 빠르고, 페이지 간 전환 시 부드러운 경험을 원할 때 사용됩니다.
SSR (Server-Side Rendering):
특징:
서버에서 모든 페이지를 렌더링하고 클라이언트에 전송합니다.
클라이언트는 받은 HTML을 렌더링하며, 초기 로딩 속도가 빠릅니다.
상황:
검색 엔진 최적화(SEO)가 필요하거나 초기 로딩 속도가 중요한 경우에 사용됩니다.
정적인 콘텐츠가 많은 경우에 유용합니다.
SSG (Static Site Generation):
특징:
빌드 시점에서 사전에 페이지를 렌더링하고, 이를 정적 파일로 제공합니다.
정적 파일은 CDN에 배포되어 성능이 우수합니다.
상황:
정적인 콘텐츠가 많고, 변경이 적은 경우에 사용됩니다.
미리 렌더링하여 성능을 향상시키고, 서버 비용을 절감할 수 있습니다.
