💻

[React] 컴포넌트 import할 때 { } 있고 없고 차이

March 13, 2022

On this page

import할 때 어떤 것은 { }를 사용하고 어떤 것은 사용하지 않는걸까?
그 차이는 바로 export 방식의 차이입니다.

javascript
import React, { useState, useCallback } from "react";

컴포넌트를 export default한 경우, import할 때 { }를 사용하지 않습니다.

javascript
function sampleComponent(props) {
    (생략...)
}
export default sampleComponent

javascript
import sampleComponent from "../component/sampleComponent";

const sampleScreen = () => {
    (생략...)
}

컴포넌트를 export한 경우, import할 때 { }를 사용합니다.

javascript
function sampleComponent(props) {
    (생략...)
}
export sampleComponent

javascript
import { sampleComponent } from "../component/sampleComponent";

const sampleScreen = () => {
    (생략...)
}