React Component

React Component

Tags
Frontend
React
Published
Author

์ปดํฌ๋„ŒํŠธ๋Š” ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๊ทธ ์ •์˜๋ฅผ ์ค‘์ฒฉํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

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)๋งŒ ๊ณ ์ˆ˜ํ•˜๊ฑฐ๋‚˜, ๋‹จ์ผ ํŒŒ์ผ ๋‚ด์—์„œ ํ˜ผํ•ฉํ•˜์ง€ ์•Š๋„๋ก ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
ย