리액트 생명주기(life cycle)에 대해 설명해 주세요.
리액트는 Mount, Update, UnMount의 생명주기를 갖는다. 생명주기 메서드는 클래스 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 Hook을 사용한다.
컴포넌트가 처음 실행이 될때 생성단계를 Mount라고 하는데 이 때 componentDidMount 메서드가 호출된다. 여기서는 DOM에 접근해 사용할 수 있다.
컴포넌트가 Update 될 때에는 componentDidUpdate 메서드가 호출되는데 가장 마지막으로 렌더링된 결과가 DOM에 반영되기 전에 호출된다.
마지막으로 컴포넌트가 UnMount될 때 componentWillUnmount 메서드가 호출되는데, 컴포넌트가 사라지기 직전에 호출하고, DOM에 등록되었던 이벤트들을 제거해주는 역할을 한다.
웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.
CSR(Client-side Redering)은 클라이언트(브라우저)에서 페이지를 렌더링하는 방식으로 React, Vue, Angular가 이에 속한다.
렌더링에 필요한 리소스와 번들 자바스크립트 파일을 다운로드 한 후 화면을 그리는 데에 시간이 걸리기 때문에 전체적인 렌더링 시간은 오래 걸리는 편이다.
하지만 페이지 렌더링에 필요한 정적 리소스와 번들 자바스크립트 파일을 최초 페이지에 접근할 때에 다운로드하고, 이동할 페이지에 필요한 부분만 추가 요청하므로 페이지 이동에 걸리는 시간은 짧다.
그리고 번들 자바스크립트 실행이 완료되고 API 응답을 받아오기 전까지 빈 화면이 표출된다. API에서 데이터를 받아오고 리렌더링이 완료되면 화면에서 인터랙션이 가능한데, 화면이 보이지만 인터랙션이 되지 않는 것보다 아예 화면이 렌더링되지 않는 편이 사용자에게는 더 직관적일 수 있다. 따라서 사용자 인터랙션이 중요한 페이지라면 SSR보다 CSR 방식이 적절하다.
SSR(Server-side Rendering)은 서버에서 페이지를 렌더링하는 방식으로 Next.js, PHP, ASP 등이 이에 속한다. 요청한 페이지에 필요한 리소스만 다운로드해서 페이지를 생성하기 때문에 최초 페이지 로딩 시간이 짧다. 사용자가 빠르게 페이지를 조회할 수는 있지만 자바스크립트 실행이 완료될 때까지 페이지 내에서의 상호 작용은 불가능하다. 또 페이지를 이동할 때마다 해당 페이지에 필요한 리소스를 다운로드하고 페이지를 다시 생성해 CSR 방식보다 페이지 이동에 걸리는 시간은 길다.
그리고 서버에서 페이지를 생성하기 때문에 검색엔진에서는 빈 HTML 문서가 아닌 완성된 HTML 문서를 수집해 검색엔진 최적화에 적합하다.
SSG(Static Site Generation)은 프로젝트 빌드 시에 페이지를 사전 렌더링하는 방식으로 Next.js, Gatsby, Nuxt.js에서 제공한다.
미리 만들어둔 페이지를 클라이언트에게 제공해 렌더링 속도가 매우 빠르다. SSR과 마찬가지로 완성된 페이지를 클라이언트에게 보내주어 SEO에도 적합하고, 블로그, 정보성 페이지 등 정적인 데이터를 보여주는 사이트에 적합하다.
