Export

• 기본적으로 export는 모듈로 사용하기 위해 내보낼 때 사용한다.

Named Export

• 한 파일 내에서 여러개의 변수/클래스/함수를 export하여 사용가능
• export하거나 import할 때 as키워드를 사용하여 다른이름으로 지정 가능
• 객체 구조분해할당으로 import시 가져옴

//export
const a = 10;

function hello() {}

export { a as b, hello as hi };


//import
import { b , hi as hello} from './ComponentDefault';

Default Export

• 한 파일 내에서 변수/클래스/함수 중 단 한개만 default export가능
• import시 명시한 파일에서 단 한개의 모듈만 가져오기 때문에 as키워드 없이 원하는 이름바꾸기 가능
• 화살표함수는 default export 불가

사용예시

함수선언식

* named 사용. 방법1

//export
*1-1*
export function ComponentDefault = () => {

    return (
        <div></div>
    )
};

//import
import {ComponentDefault} from './ComponentDefault'

*named 사용. 방법2

function ComponentDefault = () => {

    return (
        <div></div>
    )
};
export {ComponentDefault};

//import
import {ComponentDefault} from './ComponentDefault'

* default 사용. 방법1

export default function ComponentDefault() {
    return <div></div>;
};

//import
import ComponentDefault from './ComponentDefault'

* default 사용. 방법2

function ComponentDefault() {
    return <div></div>;
};

export default ComponentDefault;

//import
import ComponentDefault from './ComponentDefault'

화살표함수

* named 사용. 방법1

//export
export const ComponentDefault = () =>  {
    return <div></div>;
};

//import
import { ComponentDefault } from './ComponentDefault';

* named 사용. 방법2

//export
const ComponentDefault = () => {
    return <div></div>;
};

export { ComponentDefault };

//import
import { ComponentDefault } from './ComponentDefault';

* default 사용. 방법1

//export 
const ComponentDefault = () => {
    return <div></div>;
};

export default ComponentDefault;

//import
import ComponentDefault from './ComponentDefault';

‼️화살표함수에서는 export default Componenet Default = () => {} 사용 불가

• 화살표함수는 처음에 정의되지 않기 때문에 초기화와 동시에 export default는 불가하고 선언 이후에 export default가능(호이스팅이 안되기떄문에!)

함수선언/함수표현 차이

간단정리!

함수 선언식은 export default function Button(){}으로 선언 가능하지만 함수표현식은 export default const Button = () => {}으로 사용 불가

syntax	export statement	import statement
default	export default function Button() {}	import Button from './Button.js'
named	export function Button()	import {Button} from './Button.js'

---

export 할 때 {}를 쓰고 안쓰고 차이를 모르겠었는데 named일 때는 필요, default일때는 쓰이지 않는 다는 것을 드디어 알았다..!
개념정리하니까 뿌듯하다..
요새 마음잡고 공부하기 정말 힘든데.. 이렇게 하나 또 정리해서 다행이라고 생각한다. 마음 조급해하지말고 다시 체력 끌어올리고 마음다잡고 공부해야지.. 힘내자 할수있다. 해야지 해내야지. 양갱화이팅..