SyntaxExport ๊ตฌ๋ฌธ, Import ๊ตฌ๋ฌธ ๊ฐ๋จ ์ ๋ฆฌํ
Default | export default function Button() {} | import Button from './button.js'; |
Named | export function Button() {} | import { Button } from './button.js'; |
๋ณดํธ์ ์ผ๋ก ํ ํ์ผ์์ ํ๋์ ์ปดํฌ๋ํธ๋ง export ํ ๋ default export ๋ฐฉ์์ ์ฌ์ฉํ๊ณ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ฅผ export ํ ๊ฒฝ์ฐ์ named export ๋ฐฉ์์ ์ฌ์ฉํ๋ค.
React์์ `export`์ `export default`์ ์ฐจ์ด์ ์ ๋ค์๊ณผ ๊ฐ๋ค.
1. export
- ์ฌ๋ฌ ๊ฐ์ ๊ฐ(ํจ์, ๊ฐ์ฒด, ์์ ๊ฐ ๋ฑ)์ ๋ด๋ณด๋ผ ์ ์๋ค.
- ๊ฐ์ ธ์ฌ ๋ ์ค๊ดํธ `{}` ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
- ์ด๋ฆ์ ๊ทธ๋๋ก ์ฌ์ฉํด์ผ ํ๋ค (์ด๋ฆ ๋ณ๊ฒฝ์ ์ํ ๊ฒฝ์ฐ `as` ํค์๋ ์ฌ์ฉ).
2. export default
- ๋ชจ๋ ๋น ํ๋์ ๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ๋ง ๊ฐ๋ฅํ๋ค.
- ๊ฐ์ ธ์ฌ ๋ ์ค๊ดํธ `{}` ์์ด ์ฌ์ฉํ๋ค.
- ๊ฐ์ ธ์ฌ ๋ ์ํ๋ ์ด๋ฆ์ผ๋ก ์์ ๋กญ๊ฒ ๋ณ๊ฒฝํ ์ ์๋ค.
์์์ฝ๋:
// MyComponent.js
export const helper1 = () => { ... };
export const helper2 = () => { ... };
const MyComponent = () => { ... };
export default MyComponent;
// ๋ค๋ฅธ ํ์ผ์์ ์ฌ์ฉ
import MyComponent, { helper1, helper2 } from './MyComponent';
// ๋๋
import CustomName, { helper1 as customHelper1 } from './MyComponent';
`export`๋ ์ฌ๋ฌ ํญ๋ชฉ์ ๋ด๋ณด๋ด๊ณ ์ ํํ ์ด๋ฆ์ผ๋ก ๊ฐ์ ธ์์ผ ํ ๋ ์ ์ฉํ๋ฉฐ, `export default`๋ ์ฃผ๋ก ๋ชจ๋์ ์ฃผ์ ๊ธฐ๋ฅ์ ๋ด๋ณด๋ผ ๋ ์ฌ์ฉ๋๋ค.
`export`์ `export default` ์ฌ์ด์ ๊ธฐ๋ฅ์ , ์ฑ๋ฅ์ ์ฐจ์ด๋ ํฌ์ง ์์ง๋ง, ๋ช ๊ฐ์ง ๊ณ ๋ คํด์ผ ํ ์ ์ด ์๋ค.
๊ธฐ๋ฅ์ ์ฐจ์ด
ํธ๋ฆฌ ์์ดํน(Tree Shaking): `export`๋ก ๋ด๋ณด๋ธ ํญ๋ชฉ๋ค์ ๊ฐ๋ณ์ ์ผ๋ก ๊ฐ์ ธ์ฌ ์ ์์ด ํธ๋ฆฌ ์์ดํน์ ๋ ์ ๋ฆฌํ๋ค. ์ฌ์ฉํ์ง ์๋ ํญ๋ชฉ์ ๋ฒ๋ค์์ ์ ์ธ๋ ์ ์๋ค.
์ฌ์ฌ์ฉ์ฑ: `export`๋ ์ฌ๋ฌ ํญ๋ชฉ์ ๋ด๋ณด๋ผ ์ ์์ด ๋ชจ๋์ ์ฌ๋ฌ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ์ฌ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋ค.
๋ช
์์ฑ: `export`๋ ๊ฐ์ ธ์ฌ ๋ ์ ํํ ์ด๋ฆ์ ์ฌ์ฉํด์ผ ํด์ ์ฝ๋์ ๋ช
ํ์ฑ์ด ๋์์ง ์ ์๋ค.
์ฑ๋ฅ์ ์ฐจ์ด
๋ฒ๋ค ํฌ๊ธฐ: ํธ๋ฆฌ ์์ดํน ๊ด์ ์์ `export`๊ฐ ๋ ์ ๋ฆฌํ ์ ์์ผ๋, ์ค์ ์ฐจ์ด๋ ๋ฏธ๋ฏธํ๋ค๊ณ ํ๋ค.
๋ก๋ฉ ์๊ฐ: ๋ ๋ฐฉ์ ๋ชจ๋ ๋น์ทํ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ง๋๋ค. ์ฐจ์ด๊ฐ ์๋ค๋ฉด ๋ฌด์ํ ๋งํ ์์ค์ด๋ค.
DX
์๋ ์์ฑ: IDE์์ `export`๋ก ๋ด๋ณด๋ธ ํญ๋ชฉ๋ค์ ์๋ ์์ฑ ๊ธฐ๋ฅ์ ๋ ์ ์ง์ํ ์ ์๋ค.
๋ฆฌํฉํ ๋ง: `export`๋ ์ด๋ฆ์ ๋ณ๊ฒฝํ ๋ ๊ด๋ จ๋ ๋ชจ๋ import ๋ฌธ์ ์๋์ผ๋ก ์
๋ฐ์ดํธํ๊ธฐ ์ฝ๋ค.
๊ฒฐ๋ก ์ ์ผ๋ก, ๋ ๋ฐฉ์์ ์ฑ๋ฅ ์ฐจ์ด๋ ๊ฑฐ์ ์๋ค. ์ ํ์ ์ฃผ๋ก ์ฝ๋ฉ ์คํ์ผ, ํ๋ก์ ํธ ๊ตฌ์กฐ, ํ์ ์ปจ๋ฒค์
์ ๋ฐ๋ผ ๊ฒฐ์ ํ๋ฉด ๋๋ค. ํฐ ์ ํ๋ฆฌ์ผ์ด์
์์๋ ํธ๋ฆฌ ์์ดํน๊ณผ ์ฝ๋ ๋ถํ (code splitting)์ ๊ณ ๋ คํด `export`๋ฅผ ์ ํธํ ์ ์๋ค.
'React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React 18 ๋ณ๊ฒฝ์ ์ ๋ฆฌ (0) | 2024.11.03 |
---|---|
[ React ] React 19 RC์ ๋ํด์ ์์๋ณด์ (0) | 2024.09.23 |
[ React ] Chart UI ๊ตฌํ์ ์ํ React ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๋ฆฌ (0) | 2024.06.23 |
React์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, Zustand์ ๋ํ ๊ฐ๋ต ์ ๋ฆฌ๊ธ. (0) | 2024.06.02 |
[ Sentry ] F.E์์ Sentry๋ฅผ ํ์ฉํ์ฌ ๋๋ฒ๊น ํ๊ธฐ. (0) | 2024.05.19 |