[React] (리액트 공부하기 6) export default

리액트에서 export default Book;는 Book 컴포넌트를 외부에서 사용할 수 있도록 내보내는 역할을 한다. 닫아야 하는 이유를 설명하면 다음과 같다.

---

1. export default란?

• ES6 모듈 시스템의 문법으로, 해당 파일에서 기본(default)으로 내보낼 값(또는 컴포넌트)을 지정한다.
• export default Book;는 Book 컴포넌트를 외부에서 import할 수 있도록 내보내는 역할을 한다.

예를 들어:

import Book from './Book';

위 코드에서 Book 컴포넌트를 사용할 수 있도록 하려면 Book을 내보내기(export)해야 한다.

---

2. export default를 닫아야 하는 이유는?

이유 1: 모듈 시스템 규칙

• ES6 모듈 시스템에서는 모듈을 외부에서 사용할 때 반드시 export로 내보내야 한다.
• export default Book;를 하지 않으면 Book 컴포넌트를 다른 파일에서 사용할 수 없다.

이유 2: 재사용 가능성

• Book 컴포넌트는 다른 컴포넌트(Library 등)에서 재사용 된다.
• export 없이 정의된 컴포넌트는 해당 파일 내에서만 사용할 수 있으므로, 재사용이 불가능하다.

---

3. 무조건 닫아야 하나요?

1. 예, 무조건 내보내야 합니다 (다른 파일에서 사용하려면).

• 리액트 컴포넌트는 일반적으로 여러 파일에 나뉘어져 작성되므로, 내보내기(export)는 거의 필수이다.
• export를 하지 않으면 다른 파일에서 Book 컴포넌트를 import할 수 없다.

2. 그러나 export default는 반드시 아니어도 된다.

• export default 대신 export를 사용할 수도 있다

---

export vs export default 차이

export default

• 한파일에서 하나의 기본 내보내기만 가능.
• import 할 때 이름을 마음대로 지정할 수 있음.

// Book.js
export default Book;

// 다른 파일
import Book from './Book'; // 이름을 그대로 사용
import MyBook from './Book'; // 이름을 바꿔서 사용 가능

export

• 한 파일에서 여러 개의 값을 내보낼 수 있음
• import할 때 반드시 동일한 이름을 사용해야 함

// Book.js
export const Book = () => { ... };
export const Author = () => { ... };
                             
// 다른 파일
import { Book, Author } from './Book'; // 이름 그대로 사용해야 함

---

5. export default가 꼭 필요한 경우

리액트 컴포넌트에서는 대부분의 경우 export default를 사용한다:

• 하나의 파일에서 단일 컴포넌트를 내보낼 때 적합.
• 기본적으로 컴포넌트를 내보낼 때 이름 충돌을 방지할 수 있다.

---

6. 정리

• export default Book;는 Book 컴포넌트를 다른 파일에서 사용할 수 있도록 내보내는 역할을 한다.
• 닫아주는 것은 필수이다. 닫지 않으면 다른 파일에서 import 할 수 없다.
• export default를 사용하지 않으려면 대신 export를 사용할 수도 있다. 선택은 상황에 따라 다르다

---

알면 알수록..... 궁금한 게 투성이고... 어렵고....... 으악....ㅠ