> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/react-2/undefined.md).

# 코드 분할(조각)

## 1. 코드 조각(spliting) 

 코드 나누기로 배포 전 코드를 나누어서 애플리케이션의 성능을 최적화 하는 것을 말한다. 나누어진 코드를 청크(chunk)라고 한다.

![코드 조각이란? ](/files/-MVMtozzcJuYxvadJQiM)

위의 그림을 보고 아래 `import()` 문법의 코드를 보면 이해가 훨씬 쉽다. 

## **2. import() 문법** 

**Before**

```javascript
import { add } from './math';

console.log(add(16, 26));
```

**After**

```javascript
import("./math").then(math => {
  console.log(math.add(16, 26));
});
```

## 3. 청크(chunk)란? 

어느 큰 덩어리(조각)를 나타낸다. 조각이라고 하니 컴포넌트와 같은 역할을 하는 거라고 오해 할 수 있지만 컴포넌트 처럼 독립적으로 사용할 수 없다. 

![청크란? ](/files/-MVMtsqocvyhULn63pn8)

## 4. 참고 

* [React import() 코드 분할 ](https://ko.reactjs.org/docs/code-splitting.html#import)