[React] 컴포넌트가 import 안되는 오류

리엑트 공부하는 와중에 스스로 만든 컴포넌트를 인식하지 못하는 오류를 마주했다. 오류의 원인은 import하는 방식의 차이가 있었기 때문이었다.

vscode에서 자동으로 임포트 해준 코드! 하지만 에러가 발생??

정상적으로 인식하는 코드

export default Clock ...으로 선언한 컴포넌트를 {}을 포함한 import를 사용했기 때문에 발생한 오류였다.

오류의 원인을 찾는데 조금 시간을 사용했다. 그 원인은 import와 export에 대해서 자세히 알지 못했기 때문이었다.

그래서 이번에는 import에서 {}을 사용할 때와 사용하지 않을 때의 차이에 대해서 공부를 해보았다.`

export 방식

Named exports

여러값을 외부에 노출할 때, 사용하는 export 방식이다. 배열, 함수, 타입 등 객체를 노출시킬 수 있다.

export const array = [1, 2, 3, 4]  // 하나만 export
const array2 = ['a', 'b', 'c']
function test() {
     return "test"
}
export { array2, test } // 묶음 export

Default exports

개체 하나만 선언되어 있는 모듈의 경우에는 복수의 개체를 export할 필요하지 않다. 그래서 default export를 사용하면 간결하게 import를 사용할 수 있다.

// 📁 user.js
export default class User { // export 옆에 'default'를 추가해보았습니다.
  constructor(name) {
    this.name = name;
  }
}

// 📁 main.js
import User from './user.js'; // {User}가 아닌 User로 클래스를 가져왔습니다.

new User('John');

{}를 사용하지 않고 클래스를 import 할 수 있다!

Reference

모듈 내보내고 가져오기