리액트를 다루는 기술 _ 19장, 20장

얼른 React로 돌아가고 싶다.

---

19장. 코드 스플리팅

리액트를 완성해서 배포할 때는 빌드 작업을 거쳐야 한다.

빌드 작업을 통해 JS 속 불필요한 요소들을 제거해 파일 크기를 최소화하거나,

브라우저에서 JSX 등 최근 JS 문법이 원활하게 실행되도록 코드 트랜스 파일 작업도 가능!

 

그리고 이러한 작업은 웹팩(webpack)이란 도구가 담당한다.

(웹팩에서 별도 설정을 하지 않을 시? 프로젝트 속 모든 JS, CSS 파일이 하나로 합쳐지고 만다)

 

Create React-App의 기본 웹팩 설정에는 SplitChunks란 기능이 적용되어,

node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간 공유된 파일을 자동으로 따로 분리시켜준다!

 

즉 우리가 SPA를 개발할 때...

아무런 설정이 없으면 프로젝트 내 모든 컴포넌트에 대한 코드가 한 파일에 저장되어 버린다.

규모가 큰 애플리케이션의 경우... 당장 필요하지 않은 컴포넌트 정보도 몽땅 불러오는 것!

 

이를 해결해 주는 방법이 코드 비동기 로딩.

요 녀석을 통해 JS 함수, 객체, 컴포넌트 등을 처음에 불러오지 않고 필요한 시점에 불러와 사용할 수 있다.

 

19-1) import

import를 함수로 사용하면 Promise를 반환!

함수를 import의 메서드 안에서 사용하면, 파일을 따로 분리시켜 저장한다.

 

19-2. React.lazy, Suspense

원래라면 클래스형 컴포넌트로 state를 통해 컴포넌트 코드를 스플리팅 해야 한다.

 

하지만 React.lazy와 Suspense를 사용하면 state 선언 없이 간단하게 코드 스플리팅이 가능하다.

React.lazy는 컴포넌트를 렌더링 하는 시점에서 비동기적으로 로딩할 수 있게 해주는 함수!

Suspense는 코드 스플리팅 된 컴포넌트를 로딩하도록 발동시킬 수 있고, 로딩 중일 때 보여 줄 UI를 설정!

 

Loadable Components도 코드 스플리팅을 도와주는 라이브러리.

요 녀석의 장점은 서버 사이드 렌더링을 지원한다는 점!

서버 사이드 렌더링은 뭐시냐?

→ 웹 서비스의 초기 로딩 속도 개선, 캐싱 및 검색 엔진 최적화를 해주는 기술.

20장. 서버 사이드 렌더링

그래서 바로 넘어온 다음 장(따란)!

 

서버 사이드 렌더링은 UI를 서버에서 렌더링 하는 것을 의미한다.

지금껏 만든 React 프로젝트들은 기본적으로 클라이언트 사이드 렌더링을 하고 있는데...

이는 UI 렌더링을 브라우저에서 모두 처리하는 것!

(즉 처음에는 빈 페이지가, JS를 실행하면 우리가 만든 화면이 사용자에게 보인다)

 

하지만 서버 사이드 렌더링을 사용하면, 

사용하자 웹 서비스에 방문했을 때 서버 쪽에서 초기 렌더링을 대신해준다!

 

20-1) 장점

가장 큰 장점은 구글, 네이버, 다음 등의 검색 엔진이 우리의 페이지를 원활히 수집할 수 있다는 점!

React로 만든 SPA는 JS가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않는다.

따라서 서버에서 렌더링을 해 줄 경우, 검색 엔진이 페이지 내용을 제대로 수집해 갈 수 있는 것!

 

또한 서버 사이드 렌더링을 구현한 웹 페이지라면

JS 파일 다운로드가 완료되지 않은 시점에서도 HTML상에 사용자가 볼 수 있는 콘텐츠가 존재한다.

따라서 대기 시간이 최소화되고, UX도 향상!

 

20-2) 단점

결국 서버 사이드 렌더링은 브라우저가 할 일을 서버가 대신 처리하는 것.

이로 인해 서버 리소스가 사용되며, 갑자기 사용자가 몰릴 경우 서버에 과부하가 발생할 수 있다.

따라서 사용자가 많은 서비스라면 캐싱과 로드 밸런싱을 통해 성능을 최적화해 줘야 한다!

 

20-3) 서버 사이드 렌더링과 코드 스플리팅 충돌

별 호환 작업 없이 두 기술을 함께 적용하면... 페이지 깜빡임 현상이 발생하고 만다.

따라서 Loadable Components 라이브러리에서 제공하는 기능으로 서버 사이드 렌더링 후,

필요한 파일의 경로를 추출해 태그를 삽입해준다!