Default Export와 Named Export, React에서 왜 중요한가?

1. export와 import의 기본 개념

• export: 파일에서 다른 파일로 특정 값을 내보내는 기능.
• import: 다른 파일에서 값을 가져오는 기능.

 

2. Default Export와 Named Export의 차이

• Default Export: 파일에서 하나의 기본 값을 내보냄.
  • 내보낸 이름과 상관없이 가져올 때 원하는 이름을 자유롭게 지정 가능.

  // default export
  export default Home;
  
  // import
  import MyComponent from './Home'; // 원하는 이름으로 가져올 수 있음.

• Named Export: 파일에서 여러 값을 내보낼 때 사용.
  • 이름이 고정적이며, 가져올 때 반드시 이름과 일치해야 함.

  // named export
  export const Home = () => {};
  export const About = () => {};
  
  // import
  import { Home, About } from './Components'; // 반드시 이름을 맞춰야 함.

3. Default Export를 Named Export로 변환

• 어떤 파일에서 default로 export된 값을 가져온 후, 다른 방식으로 내보낼 수도 있음.

  // Home.js에서 default로 export된 값을 가져옴.
  import Home from './Home';
  
  // index.js에서 다시 named export로 내보냄.
  export { Home };

• 이렇게 하면, 다른 파일에서 import { Home }처럼 Named Import 형태로만 가져올 수 있음.

 

4. Default Export와 Named Export의 import 방식 차이

• Default Export: 중괄호 {} 없이 사용.
• Named Export: 반드시 중괄호 {} 사용.

 

이 개념들을 이해하고 나면

다음 상황이 명확해질 것입니다:

• 왜 중괄호 {}를 사용해야 하는지: Named Export로 다시 내보냈기 때문.
• Default Export와의 차이: Default Export는 중괄호 없이 사용할 수 있음.

 

React에서는 이 내용이 중요한 이유는 컴포넌트의 재사용성과 코드 구조화 때문입니다. React 프로젝트는 여러 개의 컴포넌트로 구성되며, 이 컴포넌트를 효율적으로 관리하고 가져오기 위해 Default Export와 Named Export를 적절히 사용하는 것이 핵심입니다.

 

1. React 컴포넌트는 대부분 파일 단위로 나뉨

• React에서는 컴포넌트를 별도의 파일에 작성하고 import로 가져오는 방식이 일반적입니다.

  // Button.js
  const Button = () => <button>Click me</button>;
  export default Button;

  // App.js
  import Button from './Button'; // Default Export

• Default Export와 Named Export 방식을 알지 못하면, 컴포넌트를 잘못 가져오거나 파일 구조를 제대로 이해하지 못해 에러를 유발할 수 있습니다.

 

2. Default Export와 Named Export를 구분해야 하는 이유

React에서는 Default Export와 Named Export를 상황에 따라 다르게 사용합니다. 이를 제대로 이해하면 코드 관리가 더 명확해집니다.

• Default Export:
  • 파일당 하나의 주요 컴포넌트를 export할 때 사용.
  • 이름을 자유롭게 변경할 수 있어 간단한 구조에 적합.

  export default App;
  import MainApp from './App'; // 자유로운 이름 사용 가능

• Named Export:
  • 여러 컴포넌트를 한 파일에서 export할 때 사용.
  • 이름을 정확히 맞춰야 하므로 대규모 프로젝트에서 명확성을 유지.

  export const Button = () => {};
  export const Input = () => {};
  
  import { Button, Input } from './Components';

3. 코드 관리와 협업에서의 중요성

• 협업: Default Export와 Named Export를 혼용하거나 잘못 사용하면, 팀원이 컴포넌트를 import할 때 혼란을 겪을 수 있습니다.
• 코드 유지보수: Named Export를 사용하면 컴포넌트 이름이 명확하게 드러나, 전체 프로젝트 구조를 이해하기 쉽습니다.
• 트리 쉐이킹(Tree Shaking): Named Export는 사용하지 않는 코드를 제거하는 데 효과적입니다. Default Export는 이 과정에서 불리할 수 있습니다.

---

React에서 흔한 사용 예시

React 프로젝트에서는 다음과 같은 방식으로 Default와 Named Export를 혼용합니다:

 

1. Default Export로 주요 컴포넌트 내보내기

// Home.js
const Home = () => <div>Home</div>;
export default Home;

 

 

2. Named Export로 여러 유틸리티 함수나 추가 컴포넌트 내보내기

// utils.js
export const formatDate = (date) => {};
export const calculateSum = (a, b) => {};

 

3. index.js에서 모든 컴포넌트를 정리

// components/index.js
import Home from './Home';
import About from './About';

export { Home, About };

 

// App.js
import { Home, About } from './components'; // Named Export 사용

 

결론

React에서는 컴포넌트 기반 개발이 핵심이므로, Default Export와 Named Export의 차이를 이해하는 것이 중요합니다. 이를 통해 코드를 더 체계적으로 관리하고, 팀 협업에서도 명확성을 유지할 수 있습니다. React를 배우고 프로젝트를 진행한다면 반드시 알아야 할 내용입니다. 🚀