7주차 위클리 페이퍼

김재환·2023년 12월 1일
0

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

모든 리액트 컴포넌트에는 생명주기가 존재 렌더전에서 페이지가 사라질때까지의 주기를 말함
React 컴포넌트의 생명주기(lifecycle) 메서드들은 컴포넌트의 생명주기 동안 특정한 시점에 자동으로 호출되어 컴포넌트의 행동을 제어 시점의 작업을 수행합니다
React가 컴포넌트의 생명주기를 자동으로 관리합니다.
마운트 업데이트 언마운트의 3카테고리로 나눕니다

마운트(Mount) 주기:

Dom이 생성되고 웹 브라우저상에 나타나는 것을 말함
constructor: 컴포넌트가 생성될 때 호출되는 메서드로, 초기 설정을 위해 사용됩니다.
getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드입니다.
render: UI를 렌더링하는 메서드로, 컴포넌트가 마운트될 때 실행됩니다.
componentDidMount: 컴포넌트가 웹 브라우저에 나타난 후 호출되는 메서드로, 초기 데이터 로딩이나 외부 리소스를 가져오는 작업에 사용됩니다.

업데이트(Update) 주기:

props가 바뀔때
state가 바뀔때
부모 컴포넌트가 리렌더링될 때
this.forceUpdate로 강제로 렌더링을 트리거 할때
getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드입니다.
shouldComponentUpdate: 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드입니다. 반환값이 true일 경우에만 업데이트를 진행합니다.
render: 컴포넌트를 리렌더링하는 메서드입니다.
getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 직전에 호출되는 메서드입니다.
componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출되는 메서드입니다.

언마운트(Unmount) 주기:

마운트와 반대, 컴포넌트를 DOM에서 제거하는 것은 언마운트라고 합니다.
componentWillUnmount: 컴포넌트가 웹 브라우저에서 사라지기 전에 호출되는 메서드로, 부수적인 정리(clean-up) 작업에 사용됩니다.

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

CSR (Client-Side Rendering), SSR (Server-Side Rendering), 그리고 SSG (Static Site Generation)는 각각 웹 페이지를 렌더링하는 다른 방식을 나타냅니다. 각 방식에는 특징과 사용되는 상황에 적합한 장단점이 있습니다.

CSR (Client-Side Rendering)

특징:
초기 페이지 로딩 시, HTML, CSS, JavaScript를 클라이언트에게 제공하고, 이후 데이터는 비동기적으로 로딩하여 렌더링합니다.
클라이언트에서 JavaScript가 실행되어 동적으로 컨텐츠를 업데이트합니다.
주로 React, Vue, Angular와 같은 프레임워크와 함께 사용됩니다.
사용 상황:
사용자 경험을 최적화하려는 경우: 페이지 로딩 후, 사용자와 상호작용이 필요한 부분을 빠르게 업데이트할 수 있습니다.
단일 페이지 애플리케이션(SPA)을 구현할 때: 클라이언트 측에서 라우팅을 처리하여 페이지 간 전환이 부드러워집니다.

SSR (Server-Side Rendering)

특징:
서버에서 초기 페이지를 렌더링하여 클라이언트에 제공합니다.
초기 HTML, CSS, JavaScript를 클라이언트에게 전송하므로 검색 엔진이 콘텐츠를 쉽게 수집하고 인덱싱할 수 있습니다.
사용자에게 보여지는 페이지는 서버에서 생성되며, 이후에는 클라이언트에서는 데이터만 가져와서 업데이트합니다.
사용 상황:
SEO가 중요한 경우: 검색 엔진 최적화가 필요한 경우에 SSR을 사용하면 초기 컨텐츠를 검색 엔진이 쉽게 수집할 수 있습니다.
초기 로딩 성능을 개선하고자 하는 경우: 초기 페이지 로딩 시에 서버에서 렌더링되므로 초기 로딩 속도를 향상시킬 수 있습니다.

SSG (Static Site Generation)

특징:
빌드 시점에 모든 페이지의 정적 HTML 파일을 생성하여 서버에 배포합니다.
서버에 부하가 거의 없으며, 정적 콘텐츠에 대한 배포가 매우 빠릅니다.
주로 정적인 컨텐츠가 자주 변경되지 않는 경우에 사용됩니다.
사용 상황:
콘텐츠가 자주 변경되지 않는 블로그, 포트폴리오, 문서 사이트 등: 데이터의 변경이 자주 일어나지 않는 경우에 정적 생성을 통해 성능을 최적화할 수 있습니다.
CDN을 활용하여 전 세계적으로 빠른 속도로 콘텐츠를 제공하고자 하는 경우.
선택 기준:
사용자 경험: CSR은 사용자와의 상호작용을 강화하고자 할 때 적합하며, SSR은 초기 로딩 속도를 개선하고 검색 엔진 최적화를 위해 사용됩니다.
SEO 요구사항: 검색 엔진 최적화가 필요한 경우 SSR이나 SSG를 사용하는 것이 좋습니다.
컨텐츠 업데이트 빈도: 컨텐츠가 자주 업데이트되지 않고 정적인 경우에는 SSG가 효과적일 수 있습니다.
많은 프로젝트에서는 이러한 방식을 혼합하여 사용하기도 하며, Next.js나 Nuxt.js와 같은 프레임워크를 통해 선택적으로 SSR 또는 SSG를 구현할 수 있습니다.

profile
안녕하세요

0개의 댓글