리액트 생명주기(life cycle), CSR, SSR, SSG

라이프사이클은

1. 생성될 때 (Mounting)
2. 업데이트할 때 (Updating)
3. 제거할 때 (Unmounting)

3가지 시점으로 나눌수 있다.

 

컴포넌트의 생성

• constructor(): 컴포넌트가 처음 생성될 때 호출된다
• static getDerivedStateFromProps(props, state): props로부터 state를 갱신할 때 사용된다.
• render(): UI를 렌더링하는 메서드로, 필수적으로 구현해야 한다. JSX를 반환한다.
• componentDidMount(): 컴포넌트가 처음 마운트된 후 호출된다. 

컴포넌트의 업데이트

• static getDerivedStateFromProps(props, state): 위에서 언급한 대로, 컴포넌트가 업데이트될 때도 호출된다.
• shouldComponentUpdate(nextProps, nextState): 컴포넌트가 리렌더링 될지 여부를 결정한다
• render(): 위에서 설명한 대로, 컴포넌트가 리렌더링될 때 호출된다.
• getSnapshotBeforeUpdate(prevProps, prevState): DOM이 실제로 업데이트되기 직전에 호출된다.
• componentDidUpdate(prevProps, prevState, snapshot): 컴포넌트가 업데이트된 후에 호출된다.

 

컴포넌트의 소멸

• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출된다.

웹 페이지 렌더링 방식에는 크게 CSR(Client-Side Rendering), SSR(Server-Side Rendering), SSG(Static Site Generation)가 있다. 

CSR (Client-Side Rendering)

• 특징:
  • 초기 로딩 시 최소한의 HTML과 JavaScript 파일을 서버로부터 받아온다.
  • JavaScript가 실행되어 클라이언트 측에서 렌더링을 수행한다.
  • 첫 로딩 시간이 길지만, 이후의 페이지 전환이 빠르다.
• 사용 상황:
  • 인터랙티브한 웹 애플리케이션(예: 싱글 페이지 애플리케이션, SPA).
  • 빈번한 사용자 상호작용이 필요한 경우.
  • 초기 로딩 시간보다 이후 사용자 경험이 중요한 경우.

SSR (Server-Side Rendering)

• 특징:
  • 서버에서 HTML을 렌더링하여 클라이언트에 전달한다.
  • 클라이언트는 완전한 HTML을 받아 즉시 화면에 표시한다.
  • 첫 로딩 시간이 빠르지만, 페이지 전환 시마다 서버 요청이 발생한다.
• 사용 상황:
  • SEO가 중요한 웹사이트(예: 블로그, 뉴스 사이트).
  • 초기 로딩 시간이 중요한 경우.
  • 정적 콘텐츠가 많고 빈번한 페이지 전환이 필요 없는 경우.

SSG (Static Site Generation)

• 특징:
  • 빌드 시점에 모든 페이지를 정적으로 생성하여 HTML 파일로 저장한다.
  • 클라이언트는 정적 파일을 받아 즉시 화면에 표시한다.
  • 빠른 로딩 시간과 뛰어난 성능을 제공한다.
• 사용 상황:
  • 변경 빈도가 낮고, 사전에 생성된 페이지를 제공할 수 있는 경우(예: 문서 사이트, 개인 블로그).
  • 성능이 중요한 경우.
  • 서버 부하를 최소화하고자 하는 경우.