[react] 코드 스플리팅

책이 거의 다 끝나간다!!!(백앤드 부분 빼고!!!!) 근데 복습해야될듯!!ㅠ

코드 스플리팅

웹팩이라는 도구는 프로젝트를 빌드할 때 별도의 설정을 하지 않으면 프로젝트에서 사용중인 모든 js파일이 하나로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐진다. 이러면 애플리케이션의 규모가 커지면 지금 당장 필요하지 않은 컴포넌트 정보까지 모두 불러오면서 파일의 크기가 커진다!! -> 로딩이 오래 걸리기 때문에 트래픽이 많이 나온다.

 

이 문제를 해결해줄 수 있는 방법이 코드 비동기 로딩이다!! 이 방법은 코드 스플리팅(파일을 분리하는 작업) 중 하나이다.

코드 비동기 로딩을 통해 자바스크립트 함수, 객체,혹은 컴포넌트를 처음에는 불러오지 않고 필요한 시점에 불러와서 사용할 수 있다!!!

 

Loadable Components는 코드 스플리팅을 편하게 하도록 도와주는 서드파티 라이브러리이다. 이 친구의 이점은 서버 사이드 렌더링을 지원한다는 것이다!! 또 렌더링을 하기 전에 필요할 때 스플리팅된 파일을 미리 불러올 수 있는 기능도 있다!

yarn add @loadable/component

설치해주고

불러오고싶은 컴포넌트를

const 함수명 = loadable(() => import('불러올 컴포넌트 있는 위치'), {
	fallback: 로딩중에 보여줄 UI
});

이렇게 사용해주고

const 이벤트명 = () => {
	함수명.preload();
}

어떤 경우에 미리 컴포넌트를 불러오고 싶으면 이런 함수를 만들어서 이벤트나 뭐 조건문에 달아주면 된다!!!!

 

서버 사이드 렌더링

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

이까지 쓰고 책 이해 못해서 서버 사이드 렌더링은 포기.. 짬이 좀 차면 다시 돌아와서 쓸꺼임 흥

 

 

---

참고 자료

「리액트를 다루는 기술 - 김민준」