🔖 리액트 생명주기(lifecycle)

모든 리액트 컴포넌트는 아래의 동일한 생명주기를 가진다.

마운트 - 업데이트 - 언마운트

마운트는 컴포넌트가 화면에 추가될 때, 업데이트는 상호작용에 대한 응답으로 새로운 props나 state를 수신했을 때, 언마운트는 컴포넌트가 화면에서 제거될 때를 의미한다.

생명주기를 다루는 메서드는 클래스 컴포넌트에서만 사용할 수 있고, 함수 컴포넌트를 사용해 리액트 생명주기를 다루고 싶다면 useEffect 훅을 사용한다.

결과적으로 생명주기를 제어하는 메서드 중 내가 실제로 사용하게(?) 되는건 render 뿐인듯.
*render는 컴포넌트를 렌더링 해주는 메서드

🌟 useEffect

useEffect 훅은 인자로 콜백과 의존성 배열(dependencies, dependency list) 두 가지를 고정으로 받는다. 콜백은 effect 부분, 그러니까 실제로 영향을 미치게 되는 실행 함수이고 의존성 배열은 useEffect의 재실행을 결정시키는 외부의 반응형 값(state, props, function, ...)을 총망라한 모음이다. 콜백 내부에서 참조하는 외부의 반응형 값은 모두 의존성 배열에 추가해야 한다.

useEffect는 최초 렌더링시 DOM 업데이트가 완료되면 가장 마지막으로 콜백을 실행하고, 이후 의존성 배열 내부 요소 각각이 참조하는 값이 변화할 때마다 콜백을 재실행한다. 이는 반응형 값이 바뀌면 useEffect 콜백이 내놓는 결과도 당연히 바뀌기 때문이다. 즉 의존성 배열 요소의 업데이트 시점을 캐치하여 콜백을 재실행하고 동기화한다.

컴포넌트가 화면에서 사라지는 언마운트 시점에는 콜백의 effect로 설정했던 부분을 초기화하는 정리(cleanup) 코드가 필요하다. 이를 통해 불필요하게 발생하는 메모리 누수를 방지할 수 있다. (화면에서 사라지는 시점에 더이상 작동할 필요 없는 코드, 메모리 저장 등을 해제) 이 코드는 useEffect 콜백의 return값으로 작성해두면 리액트가 해당 코드를 기억하고 있다가 언마운트 시점에 실행한다.

언마운트 시점 외에도, 의존성 배열 요소 참조값의 변화로 useEffect를 통한 동기화가 발생하는 시점(effect가 실행되는 시점)마다 정리 함수를 먼저 실행 후 동기화한다.

최종적으로 useEffect 콜백의 형태와 실행 순서는 아래와 같다.

useEffect(() => {
  // Effect ...
  const example = setInterval(() => {
    console.log(deps1, deps2);
  }, 1000);
  
  // Cleanup ...
  return clearInterval(example);
}, [deps1, deps2, ... ]);

최초 렌더링(마운트) → useEffect 콜백 실행, cleanup 함수 기억
deps 업데이트 → cleanup 함수 실행 → useEffect 콜백 재실행, cleanup 함수 기억
컴포넌트 언마운트 → cleanup 함수 실행

🔖 웹 페이지 렌더링 방식

🌟 CSR

클라이언트사이드 렌더링의 줄임말로, 웹 브라우저에서 자바스크립트를 통해 HTML 페이지를 렌더링하는 방식이다. 모든 로직과 라우팅 등을 서버가 아닌 클라이언트(웹 브라우저)에서 처리한다.

브라우저는 컨텐츠는 비어있고 자바스크립트 번들 파일이 담긴 HTML 파일을 다운로드해 api 요청 등을 수행하며 동적 컨텐츠를 가져오고 파싱해 화면을 렌더링한다. 페이지 이동 시에도 추가 HTML 파일 다운로드 없이 자바스크립트를 이용한다.

사용자가 페이지를 요청할 때마다 서버에서 필요한 데이터만 받아와 업데이트하기 때문에 로딩이 빠르고 동적으로 페이지 업데이트가 가능하다. 하지만 초기에 받아야 하는 파일이 크기 때문에, 초기 렌더링 속도가 느리며 검색엔진 최적화에 불리하는 단점이 있다. 리액트에서 주로 사용하는 렌더링 방식이다.

동적인 사용자 경험이 중요하고 사용자와의 상호작용이 많으며, SEO가 중요하지 않은 경우 적합하다.

🌟 SSR

서버사이드 렌더링의 줄임말로, 서버에서 페이지를 렌더링하여 완전한 HTML을 생성 후 클라이언트로 보내는 방식이다.

서버에서 리퀘스트를 받아 상황에 맞는 HTML을 만들어 리스폰스로 보내주면 서버로부터 받아온 HTML을 브라우저에 표시하고 이후에 자바스크립트 파일을 받아와서 상호작용을 처리한다.

사용자에게 초기에 완전한 페이지를 보여주며 검색 엔진 노출이 잘된다는 장점이 있지만, 매 요청마다 서버에서 페이지를 렌더링해야 하고 동적 사용자 경험 면에서 부족할 수 있다.

빠른 초기 로딩이 중요한 경우, 사용자와의 상호작용이 적은 경우, 검색 엔진 최적화가 중요한 경우 적합하다.

🌟 SSG

Static Site Generation의 줄임말로, 사전에 모든 페이지를 미리 렌더링하여 정적 파일로 생성하는 방식이다. 클라이언트의 요청에 따라 미리 생성된 정적 파일을 제공한다.

모든 페이지가 사전에 렌더링 되어있으므로 로딩 속도가 빠르고 보안에 강력할 수 있다. 하지만 동적 데이터가 있는 경우 콘텐츠 처리가 어려울 수 있고, 따라서 자주 변경되는 콘텐츠에는 적합하지 않을 수 있다.

빠른 초기 로딩이 필요하고 보안이 필요한 경우, 컨텐츠가 자주 변경되지 않는 경우에 적합하다.

리액트에서 Next.js 같은 프레임워크를 사용해 구현할 수 있다.