์ปดํฌ๋ํธ๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ ์ ์์ง๋ง, ๊ทธ ์ ์๋ฅผ ์ค์ฒฉํด์๋ ์ ๋ฉ๋๋ค.
export default function Gallery(){ function Profile(){ // ... } // ... }
์์ ์ค๋ํซ์ ๋งค์ฐ ๋๋ฆฌ๊ณ ๋ฒ๊ทธ๋ฅผ ์ด๋ฐํฉ๋๋ค.
export default function Gallery(){ // ... } function Profile(){ // ... }
์์ ์ปดํฌ๋ํธ์ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ์ผ๋ถ ๋ฐ์ดํฐ๊ฐ ํ์ํ ๊ฒฝ์ฐ, ์ ์๋ฅผ ์ค์ฒฉํ๋ ๋์ props๋ก ์ ๋ฌํ์ธ์.
์ปดํฌ๋ํธ์ ๊ฐ์ฅ ํฐ ์ฅ์ ์ ์ฌ์ฌ์ฉ์ฑ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ์กฐํฉํด ๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
- ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ ๋ฒ ์ค์ฒฉํ๊ฒ ๋๋ฉด ๋ค๋ฅธ ํ์ผ๋ก ๋ถ๋ฆฌํด์ผ ํ๋ ์์ ์ด ์๊น๋๋ค.
- ์ด๋ ๊ฒ ๋ถ๋ฆฌํ๋ฉด ๋์ค์ ํ์ผ์ ์ฐพ๊ธฐ ์ฝ๊ณ ์ฌ์ฌ์ฉํ๊ธฐ ํธ๋ฆฌํด์ง๋๋ค.
Export ํ๋ ๋ฐฉ์ ๋๊ฐ์ง
Syntax | Export statement | Import statement |
Default | export default function Button() {} | import Button from './Button.js'; |
Named | export function Button() {} | import { Button } from './Button.js'; |
ํ ํ์ผ ์
default export
๋ฅผ ํ๋๋ง ๊ฐ์ง ์ ์์ง๋ง, named export
๋ ์ฌ๋ฌ ๊ฐ ๊ฐ์ง ์ ์์ต๋๋ค.default export์ named export ์ฌ์ด์ ์ ์ฌ์ ์ธ ํผ๋์ ์ค์ด๊ธฐ ์ํด ์ผ๋ถ ํ์์๋ ํ ๊ฐ์ง ์คํ์ผ(default ๋๋ named)๋ง ๊ณ ์ํ๊ฑฐ๋, ๋จ์ผ ํ์ผ ๋ด์์ ํผํฉํ์ง ์๋๋ก ์ ํํฉ๋๋ค.
ย