Default Import 와 Named Import 의 Import 방식 차이

Next.js 를 새롭게 배우고 있는데 함수를 Import 하다가 뭔가 생긴게 이상하다 싶어서 알게된 Default Import와 Named Import. 그래서 알게된 것을 글로 정리 해보았다.

 

 

Default Import

Default Import는 파일에서 하나의 컴포넌트를 기본으로 내보내고, 이를 가져올 때 사용하는 방식이다. 예를 들어, components/todo.tsx 파일에서 Todo 컴포넌트를 기본으로 내보낼 수 있다. 

// components/todo.tsx
export default function Todo() {
    return <div>Todo Component</div>;
}

 

그리고 아래 예시처럼 Todo 컴포넌트를 가져올 수 있다.

// app/page.tsx
import Todo from "../components/todo";

export default function Page() {
    return <Todo />;
}

 

 

Named Import

Named Import는 하나의 파일에서 여러 컴포넌트나 함수를 내보내고, 이를 필요에 따라 가져오는 방식이다. 예를 들어, config/provider.tsx에서 여러 가지 함수를 내보낼 수 있다.

// config/provider.tsx
export function ProviderA({ children }) {
    ...
}

export function ProviderB() {
    ...
}

 

이 경우에는 아래처럼 중괄호 안에 해당하는 함수 이름들을 넣어야 불러 올 수 있다. 하나의 파일에서 여러 가지 컴포넌트를 내보내고, 필요한 것만 선택적으로 가져올 때 유용하다.

 

// app/ui.tsx
import { ProviderA, ProviderB } from "../config/provider";

export default function UI() {
    return (
        <ProviderA />
        <ProviderB />
    );
}

 

 

 

결론

- Default Import 은 하나의 모듈 파일에서 하나의 기본적인 값을 내보내는 방식이다. 이를 사용할 때는 중괄호 없이 해당 값을 가져온다.

- Named Import: 하나의 모듈 파일에서 여러 값을 내보낼 수 있는 방식이다. 여러 값을 export할 수 있고, 가져올 때는 중괄호를 사용하여 가져온다.

 

각 파일 구조와 컴포넌트 관리 방법에 따라 적절한 Import 방식을 사용하자.