[React / React Naive TIPS] import 할 때, {}를 넣고 빼고는 무슨 차이 일까?

[React / React Naive TIPS] import 할 때, {}를 넣고 빼고는 무슨 차이 일까?

* 해당 글은 구글 검색 'react import {} or not' 했을 때 나오는 검색 결과를 기반으로 작성 되었습니다.

예전부터 들었던 의문 중에 하나는, 리액트 혹은 리액트 네이티브 프로젝트를 할 때, 맨 윗줄에 항상 이 코드가 존재하는데,

import React, {Commponent} from 'react'

여기서, 왜 React는 {}가 없고 왜 Component 부분은 {}가 있을까?

이것의 가장 간단한 답변은 다음과 같다.

import React from 'react'

• 이것은 default import 를 말한다.
• 우리가 함수 혹은 클래스 앞단에 설정을 할 떄, 'export default' 혹은 'export' 같은 것들을 쓴 기억이 있을 텐데, 'export default' 를 쓸 때는 위와 같이 사용 할 수 있다.
• 그리고 오직 한개만 가능하다.

import { Component } from 'react'

• 위와 다르게 이것은 member import(named import) 라고 부르고, member import는 export 될 때, export 를 사용하고, 여러개의 member export가 가능하다.

import Component from 'react'

• 결론적으로 Component가 export 되었다고 했을 때, 위와같이 쓰는 것은 틀린 것이다.
• 위와 방법은 export default로 export 되었을 때 저렇게 사용한다.

MDN 문서를 보면 다음과 같은 예시로 사용가능 하다.

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";