ReactJS _ export default

 

 

export default는 JavaScript ES6 모듈 시스템의 문법으로, 모듈에서 기본적으로 하나의 값만 내보낼 수 있도록 하는 방식입니다. React에서는 컴포넌트, 함수, 클래스 등을 export default를 통해 외부 모듈로 내보내고 import 키워드를 통해 다른 파일에서 불러와 사용할 수 있습니다. React 프로젝트에서는 주로 기본 컴포넌트를 내보낼 때 export default를 사용하여 직관적이고 간단한 import 문법을 제공합니다.

 

 

export default의 기본 사용법

export default를 사용하면 모듈을 가져올 때 임의의 이름으로 import 할 수 있습니다.

// Button.js
function Button() {
    return <button>Click here</button>;
}

export default Button;  // Button 함수를 기본으로 내보내기

// App.js
import ButtonA from './Button'; // Button.js를 원하는 이름으로 import 하여 사용

function App() {
    return (
        <div>
            <ButtonA />
        </div>
    );
}

 

 

export default와 export 차이

구분	export default	export (named export)
내보낼 수 있는 개수	모듈당 하나의 값만 내보낼 수 있음	여러 개의 값, 함수, 변수를 내보낼 수 있음
import 문법	import AnyName from './Module'	import { Name } from './Module'

// export default example
// Message.js
export default function Message() {
    return <p>Hello, world!</p>;
}

// App.js
import MessageComponent from './Message';

// named export example
// utils.js
export const greet = () => "Hello!";
export const farewell = () => "Goodbye~";

// App.js
import { greet, farewell } from './utils'; // 반드시 중괄호를 사용해야함

 

 

export default 주의사항

1. 모듈 당 하나의 export default만 가능
2. 다른 이름으로 import 가능
3. 불필요한 중괄호 사용 금지
   export default로 내보낸 모듈은 import 시 중괄호를 사용하지 않음

 

export default의 사용 사례

// App.js
function App() {
    return <h1>My React App</h1>;
}

export default App;

// index.js
import MyApp from './App';
import ReactDOM from 'react-dom';

ReactDOM.render(<MyApp />, document.getElementById('root'));

 

 

export default와 코드 유지보수성

• 코드 가독성
  컴포넌트 파일 이름과 동일한 이름으로 import하여 코드 가독성을 높일 수 있습니다.
• 모듈 관리
  하나의 주요 기능을 내보낼 때 export default를 사용하여 모듈 간 의존성을 관리합니다.
• 유연성
  import 시 이름을 변경할 수 있어 다른 컴포넌트와 충돌을 방지할 수 있습니다.

 

 

---

 

 

export default는 React 프로젝트에서 함수, 클래스, 컴포넌트 등을 외부 모듈로 내보내기 위해 사용되는 중요한 문법입니다. 기본 내보내기는 모듈당 하나만 사용할 수 있으며, import 시 임의의 이름으로 가져올 수 있습니다. named export와 혼동하지 않도록 default와 중괄호 사용 규칙을 정확히 이해하는 것이 중요합니다. export default를 잘 활용하면 React 컴포넌트를 모듈화하여 코드의 유지보수성과 재사용성을 높일 수 있습니다.