Dynamic loading 동적적재
동적 로딩은 컴퓨터 프로그램이 런타임에 라이브러리를 메모리에로드하고 라이브러리에 포함 된 함수 및 변수의 주소를 검색하고 해당 함수를 실행하거나 해당 변수에 액세스하고 메모리에서 라이브러리를 언로드 할 수있는 메커니즘입니다
from 위키백과
dynamic loading은 메모리 관리 전략 중 하나이다.
loading이란 데이터를 메모리에 옮기는것이다.
프로그램을 실행시키면 .exe 에있는 파일이 메모리에 올라가야 실행이되는것과같이, 데이터를 메모리에 옮기는것을 로딩(메모리 적재)이라고 한다.
Dynamic loading이란 프로세스가 실행될때, 그 프로세스의 주소공간 전체를 메모리에 올려놓는것이아니라, 메모리를 좀 더 효율적으로 사용하기 위해 필요한 루틴이 호출될 때 해당루틴을 메모리에 적재하는방식이다
쉽게 말하면, 필요한 시점에만 적재하니깐 메모리를 더 효율적으로 쓰는게 가능하다.
특징을 보면
필요할 때만 적재되어서, 코드 양이 많을때 자주 호출되지않는 루틴(에러처리 루틴)에 효율적이며 OS의 특별한 자원을 필요로하지않고 프로그래머의 재량에따라 구현이 가능하다.
Lazy loading 지연된 로딩
필요 시점까지 객체의 초기화를 연기시키기 위해 컴퓨터 프로그래밍에 흔히 사용되는 디자인 패턴중 하나이다.
즉, 초기 페이지 렌더링 속도를 높이기위해 나중에 필요한 자원은 나중에 요청하는것!
예를들면 이미지를 검색했을때, 검색어와 관련된 일부이미지만 보여주고, 스크롤이 하단으로 내려오는경우 이미지를 더 로드하는 방식을 생각하면 이해가 쉬울것이다.
lazy loading과 dynamic loading을 비교하기전에
Code Splitting이 무엇인지 알아보자
Code Splitting
- webpack의 기능중 하나로, 코드를 다양한 번들로 분할하고, 요청에 따라 로드하거나 병렬로 로드할 수 있다.
- 더 작은 번들로 만들고 리소스 우선순위를 올바르게 제어하기 위해서 사용하며, 잘 활용하면 로드 시간에 큰 영향을 끼칠 수 있다.
Dynamic import
동적 불러오기를 공부하기전에 정적 불러오기가 무엇인지 알아보자
static import
- 코드파일의 가장 상위에서 import 구문을 사용하여 불러오는 방식을 static import라고한다.
- 모듈 경로엔 원시 문자열만 들어갈수 있다.
- 런타임이나 조건부로 모듈을 불러올 수 없다.
if(...) { import ...; // 모듈을 조건부로 불러올 수 없으므로 에러 발생 } { import ...; // import 문은 블록 안에 올 수 없으므로 에러 발생 }이러한 제약사항이 만들어진 이유는 import/export는 코드 구조의 주심을 잡아주는 역할을 하기때문이다 > ??
- 코드구조를 분석해 모듈을 한데모아 번들링하고, 사용하지않는 모듈은 제거하는데, 이러한 작업은 코드구조가 간단하고 고정되어있을때만 가능하다!
그럼 모듈을 동적으로 불러오고 싶을땐 어떻게할까?
import() 표현식
- 이 표현식은 모듈을 읽고 이 모듈이 내보내는것들을 모두 포함하는 객체를 담은 프로미스를 반환한다.
- 호출은 어디서나 가능하다
코드 내 어느곳에서나 동적으로 호출이 가능하다.
let modulePath = prompt("어떤 모듈을 불러오고 싶으세요?");
import(modulePath)
.then(obj => <모듈 객체>)
.catch(err => <로딩 에러, e.g. 해당하는 모듈이 없는 경우>)🟠 import()는 함수호출과 문법이 유사해보이지만, 함수호출은 아니다.
super()처럼 괄호를 쓰는 특별한 문법중 하나이다.
React.lazy
만약 React 컴포넌트를 dynamic import 하고싶다면 위의 방식으로 컴포넌트를 import하면 에러가 난다.
컴포넌트를 동적으로 불러오려면 React.lazy를 사용해야한다.
import { Suspense } from 'react';
const SomeComponent = React.lazy(() => import('./SomeComponent'));
const MyComponent = () => {
return (
<Suspense fallback={<div>로딩 중. . .</div>}>
<SomeComponent />
</Suspense>
);
}동적으로 불러와지는 컴포넌트는 export default를 가진 모듈이어야한다.
그리고 React.lazy로 불러온 컴포넌트는 무조건 React.suspense로 감싸져야한다.
https://ko.javascript.info/modules-dynamic-imports
https://velog.io/@code-bebop/dynamic-import%EC%99%80-React.lazy#code-splitting
