๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

React

[ React ] React์˜ export์™€ export default ์ฐจ์ด์  ์•Œ์•„๋ณด๊ธฐ

 

 

 


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`๋ฅผ ์„ ํ˜ธํ•  ์ˆ˜ ์žˆ๋‹ค.