리액트 공부하기 - export, import 컴포넌트 내보내기, 불러오기

요즈음의 나.. 곧 카페인 중독 될듯..

 

음. 정말 기초라고 생각했고, 쓸 때 그냥 대충 휘릭 ~ 썼는데

프로젝트 하면서 막 컴포넌트 분리하고, 가져다 쓰고 하니까 여간 헷갈리는게 아니더라!

아주 기초 내용이니 두고 두고 볼 수 있을 것 같아서 탄탄히 정리하기.

 

---

export란?

모듈(파일)에서 변수, 함수, 컴포넌트 등을 다른 파일에서 사용할 수 있도록 내보내는 것.

 

export 종류

 

 1-1. Named Export (이름을 붙여서 내보내기)

export const Jane = () => { return <div>Hi Jane</div>; };

 

또는

const Jane = () => { return <div>Hi Jane</div>; };
export { Jane };

이 방식은 여러 개를 한 파일에서 내보낼 수 있다.

 

 

사용법 (가져올 때)

import { Jane } from './MyComponent';

 

 

 

1-2. Default Export (기본값으로 하나 내보내기)

const Jane = () => { return <div>Hi Jane</div>; };
export default Jane;

 

 

또는 한 줄로도 가능:

export default function Jane() { return <div>Hi Jane</div>; }

💡 이 방식은 한 파일에 오직 하나만 default export 가능해!

 

? 비효율 적 이라고 느껴져.

ㅋㅋ Jane 말 이해돼요! 처음에는 “왜 default export 하나밖에 안 되지?” 하고 답답하게 느껴질 수 있어요. 근데 나름의 이유가 있어요!

---

💡 왜 default export는 하나만 가능할까?

1. 가독성과 명확성 때문이에요
   • default export는 말 그대로 "이 파일에서 제일 중요한 걸 하나" 지정하는 느낌이에요.
   • 예를 들어 Button.jsx라는 파일이 있다면, 대부분은 Button 컴포넌트를 default로 export하니까,이렇게 쓰기 편하죠.
   • import Button from './Button'; // 명확하고 직관적
2. 코드를 읽는 사람이 바로 이해하기 쉬워요
   • 어떤 파일이든 default export만 보면 “아, 이 파일의 주인공은 얘구나!” 하고 알 수 있어요.
   • 반면에 named export만 있으면,처럼 여러 개 중에 뭘 써야 하는지 헷갈릴 수 있죠.
   • import { A, B, C } from './utils';
3. 유연하게 import 이름을 바꿀 수 있어요
   • default export는 import할 때 이름 마음대로 지을 수 있어요:
   • import Whatever from './Button'; // 이름 변경 가능
   • 반면에 named export는 반드시 정확한 이름을 써야 해요:
   • import { Button } from './Button'; // 이름 일치해야 함

---

🤔 근데 비효율적으로 느껴지는 이유는?

• 여러 컴포넌트를 하나의 파일에 모아서 쓰고 싶을 때는, default export가 불편하게 느껴져요.
• 특히 Vue나 React 프로젝트에서 index.js로 컴포넌트 정리할 때 좀 귀찮을 수 있어요.

---

🛠 팁: default + named export 같이 쓰면 편해요!

// Button.jsx
function Button() {
  return <button>Click</button>;
}
function IconButton() {
  return <button>★</button>;
}
export default Button;
export { IconButton };

// App.jsx
import Button, { IconButton } from './Button';

 

 

 

👉 사용법 (가져올 때)

import Jane from './MyComponent'; // 중괄호 없음

 

---

2. 괄호 쓰는 이유 (import 할 때)

• default export → 괄호 ❌

import Jane from './MyComponent'; // default export는 이름도 바꿀 수 있음

• named export → 괄호 ⭕

import { Jane } from './MyComponent'; // 이름 반드시 일치해야 함!

---

3. 둘 다 섞어서 쓰기 가능해?

가능은 해!

export const Hello = () => <div>Hello</div>;
export const Bye = () => <div>Bye</div>;
const Jane = () => <div>I'm Jane</div>;
export default Jane;

가져올 땐 이렇게:

import Jane, { Hello, Bye } from './MyComponent';

---

4. 주의할 점

default export는 이름을 자유롭게 바꿔서 가져올 수 있어.

// MyComponent.js
export default function Jane() { ... }

// 다른 파일
import Anything from './MyComponent'; // 이름 마음대로 가능!

 

named export는 반드시 정확한 이름을 써야 함.

// MyComponent.js
export const Jane = () => { ... }

// 다른 파일
import { Jane } from './MyComponent'; // ✅
import { JANE } from './MyComponent'; // ❌ 오류

 

 

---

출처 : 리액트 공식문서, 챗지피티