위클리 페이퍼 8주차

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

• 리액트(React) 컴포넌트의 생명주기(Life Cycle)는 컴포넌트가 생성되고 업데이트되며 제거될 때 거치는 일련의 단계입니다. 생명주기 메서드(lifecycle methods)를 통해 이러한 단계에서 원하는 동작을 수행할 수 있습니다. 리액트 v16.3 이전에는 클래스 기반 컴포넌트에서 주로 사용되었으나, 리액트 v16.3부터 함수형 컴포넌트에서도 생명주기와 유사한 동작을 구현할 수 있는 Hook이 추가되었습니다.

  리액트의 주요 생명주기 메서드와 그 역할은 다음과 같습니다:

1. 마운팅(Mounting):
   • constructor(): 컴포넌트가 생성될 때 호출됩니다.
   • static getDerivedStateFromProps(props, state): 초기 상태(state)를 설정하거나 prop 변화에 따라 상태를 업데이트할 때 호출됩니다.
   • render(): UI를 렌더링합니다.
   • componentDidMount(): 컴포넌트가 화면에 마운팅된 후 호출됩니다. 외부 데이터 로딩이나 초기화 작업 등을 처리하는 데 사용됩니다.
2. 업데이팅(Updating):
   • static getDerivedStateFromProps(props, state): prop 변화에 따라 상태를 업데이트할 때 호출됩니다.
   • shouldComponentUpdate(nextProps, nextState): 컴포넌트의 리렌더링 여부를 결정합니다. 성능 최적화에 사용됩니다.
   • render(): UI를 렌더링합니다.
   • getSnapshotBeforeUpdate(prevProps, prevState): DOM 업데이트 직전에 호출되며, 현재 스크롤 위치나 포커스와 같은 정보를 가져오는 데 사용됩니다.
   • componentDidUpdate(prevProps, prevState, snapshot): 컴포넌트의 업데이트가 완료된 후 호출됩니다. DOM 조작이나 외부 데이터 요청 등을 처리하는 데 사용됩니다.
3. 언마운팅(Unmounting):
   • componentWillUnmount(): 컴포넌트가 화면에서 제거되기 전에 호출됩니다. 리소스 정리 작업이나 타이머 해제 등을 처리하는 데 사용됩니다.
   • 오류 처리(Error Handling):
   • static getDerivedStateFromError(error): 하위 컴포넌트에서 발생한 오류를 처리하고 상태(state)를 업데이트할 때 호출됩니다.
   • componentDidCatch(error, info): 하위 컴포넌트에서 발생한 오류 정보와 함께 오류 처리 작업을 수행하는 데 사용됩니다.

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

• 웹 페이지 렌더링 방식인 CSR(Client-Side Rendering), SSR(Server-Side Rendering), SSG(Static Site Generation)은 각각 다른 특징과 사용 상황을 가지고 있습니다. 이해를 돕기 위해 각 방식의 특징과 적합한 상황을 설명하겠습니다:

1. CSR (Client-Side Rendering):
   • 특징: 초기 HTML 파일은 비어있거나 최소한의 마크업만 포함하고, JavaScript를 사용하여 클라이언트 측에서 동적으로 컨텐츠를 렌더링합니다.
     작동 방식: 클라이언트가 페이지에 접근하면 초기 로딩 시에는 빈 화면이 보여지며, 필요한 JavaScript 및 데이터를 다운로드한 후에 컨텐츠가 동적으로 생성되어 보여집니다.
   • 장점: 사용자 경험(UX)을 향상시킬 수 있으며, 클라이언트 측에서 데이터를 가져와서 동적으로 변경할 수 있는 유연성을 제공합니다.
   • 적합한 상황: 대부분의 애플리케이션에서 CSR은 좋은 선택입니다. 특히 싱글 페이지 애플리케이션(SPA)처럼 많은 상호작용과 동적인 업데이트가 필요한 경우에 적합합니다.
2. SSR (Server-Side Rendering):
   • • 특징: 서버에서 초기 렌더링을 수행하여 완전한 HTML을 생성한 후 클라이언트로 전송합니다.
   • 작동 방식: 클라이언트 요청 시 서버에서 컴포넌트를 렌더링하고, 그 결과를 HTML로 변환하여 클라이언트에게 반환합니다. 이후 클라이언트 측 JavaScript가 로드되어 상호작용을 처리할 수 있습니다.
   • 장점: 초기 로딩 속도가 빠르고 검색 엔진 최적화(SEO)에 유리합니다. 정적인 콘텐츠와 동적인 콘텐츠의 혼합된 애플리케이션에 유용합니다.
   • 적합한 상황: SEO가 중요하거나 초기 로딩 속도가 중요한 경우, 동적인 데이터와 함께 정적인 페이지를 제공해야 하는 경우 등 SSR은 좋은 선택입니다.
3. SSG (Static Site Generation):
   • 특징: 사전에 페이지를 미리 생성하여 정적 파일로 저장하는 방식입니다. 요청 시점에 동일한 내용의 페이지를 반환하므로 서버 부담이 줄어듭니다.
     작동 방식: 빌드 시점에 데이터를 가져와 페이지를 생성하고, 생성된 페이지를 정적 파일로 저장합니다. 이후 클라이언트 요청 시 저장된 정적 파일을 반환합니다.
   • 장점: 빠른 로딩 속도와 확장성, 보안성이 있으며 서버 부담이 적습니다. 캐싱과 CDN(Content Delivery Network)을 통해 전 세계 어디서나 빠르게 제공할 수 있습니다.
   • 적합한 상황: 변하지 않는 컨텐츠나 주기적으로 업데이트되는 컨텐츠가 없는 경우, 정적인 사이트나 블로그 등에 사용하면 좋습니다.

각 방식은 애플리케이션의 목적과 요구사항에 따라 선택됩니다. 일반적으로 CSR은 대부분의 동적인 웹 애플리케이션에 적합하며, SSR은 SEO가 중요한 경우나 초기 로딩 속도가 중요한 경우에 유용합니다. SSG는 정적인 사이트나 블로그 등에서 많이 사용되며, 서버 부담을 줄일 수 있는 장점을 가지고 있습니다.