ES6에서의 Default 키워드 이해하기
ES6에 처음 입문하고 React 튜토리얼을 따라하다 보면, 모듈에서 이름을 내보낼 때 default 키워드를 자주 사용하는 것을 볼 수 있습니다. 이 블로그 포스트에서는 default 키워드의 이유와 ES6에서의 중요성을 자세히 살펴보겠습니다.
ES6에서 여러 변수 내보내기
ES6에서는 동일한 파일에서 여러 변수를 내보낼 수 있습니다. 그러나 default 키워드는 한 번에 하나의 변수를 기본 내보내기로 내보낼 때 사용됩니다.
const Header = () => {
// Header 컴포넌트 코드
};
export default Header;
위 예제에서 Header 컴포넌트는 default 키워드를 사용하여 기본 내보내기로 내보내집니다. 이를 사용하여 중괄호 {}를 사용하지 않고 가져올 수 있습니다:
import Header from './Header.jsx';
이 구문을 사용하면 export 이름을 지정하지 않고 기본 내보내기를 독립적인 개체로 쉽게 가져올 수 있습니다.
기본이 아닌 변수 내보내기
반면, 기본이 아닌 변수나 컴포넌트를 내보내려면 일반적인 export 구문을 사용할 수 있습니다:
export const BlogPost = () => {
// BlogPost 컴포넌트 코드
};
위 예제에서 BlogPost 컴포넌트는 일반적인 export 구문을 사용하여 내보냅니다. 이를 가져오려면 중괄호 {}를 사용해야 합니다:
import { BlogPost } from './BlogPost.jsx';
일반적인 export 구문을 사용하면 동일한 파일 내에서 여러 변수나 컴포넌트를 내보낼 수 있습니다.
Default 키워드의 이점
ES6의 default 키워드는 여러 가지 이점을 제공합니다:
- 간편함: 기본 내보내기를 사용하면 이름을 지정하지 않고 단일 개체를 가져올 수 있으므로 import 문이 간결하고 가독성이 좋아집니다.
- 일관성: 기본 내보내기에 default 키워드를 사용하면 기본 내보내기와 기본이 아닌 내보내기를 쉽게 구별할 수 있습니다.
- 유연성: 기본 내보내기는 모듈의 주요 기능이나 주요 컴포넌트를 나타낼 수 있으므로 추가 구성 없이 가져오기가 더 쉬워집니다.
요약
ES6의 default 키워드는 모듈에서 단일 변수나 컴포넌트를 기본 내보내기로 내보내는 데 사용됩니다. 이를 통해 중괄호 {}를 사용하지 않고 기본 내보내기를 가져올 수 있어 import 문을 간소화할 수 있습니다. 그러나 일반적인 export 구문을 사용하여 여러 변수를 내보낼 수도 있습니다. default 키워드에 대한 이해는 특히 React와 같은 프레임워크에서 ES6 모듈을 다룰 때 중요합니다.
default 키워드의 개념을 이해함으로써 ES6의 내보내기와 가져오기 기능을 효과적으로 활용하여 모듈 구성과 코드 가독성을 개선할 수 있습니다.
