[리액트]export default와 export

export default와 export name의 비교

 어떤 컴포넌트를 보면 export default를 사용하고 있고, 어떤 컴포넌트를 보면 default가 없는 export만을 사용하고 있었다. 나는 먼저 '저 둘의 차이는 무엇인가?'에대한 개념이 없었고, 어떻게 사용하는지에대해 감을 잡지 못하고 있었다. 

Q. 언제 export default를 사용하고 언제 export를 사용하는 걸까?

개념

export란 ? 간단하게 말해 '내보내기'를 의미한다. ( 반대로 import 는 '불러오기'를 의미한다. )

< 전제 >
1. pages에 component1.js, component2.js가 포함되어있고, index.js에서 한번에 묶어서 내보냄
→이렇게 관리하는 이유? 이렇게 관리하면 좀 더 깔끔하게 코드정리가 가능한것같아서

//import와 export 

// import
// 최상단에 적는걸 권장
import React from 'react'; 

//export 
//방법 1
export const funcA = () => {    }

//방법 2
const funcB = () => {    }
export funcB;

 

export default 와 export의 차이

결론 부터 말하자면? 뭘쓰던 딱히 상관이 없다. ( 회사에서 정한 컨벤션이 있다면 그에 따르자.)

export default 와 export name 를 찾아봤을때,

항상 결론이 '이름이 있고 없고의 문제일뿐 상관없어요!!' 

라는 답변을 보아왔었다.

혼자만의 생각으로 
default는 기본값이니까 중요한 뭔가가 있지 않을까? 어느시점에 꼭 필요한가? 내가 검색을 잘못한건가??? 라고
생각해서 헷갈리기 시작했었는데,
내가 그냥 default로 내보낼때 받아오는 문법과 export로 내보냈을때 문법을 모른것이 
문제의 포인트였던것이었다.......

(계속 default로 내보내라길래, routing 할때는 export default를 해야하는줄 알았지, 문법이 틀렸을거라곤 상상도 못했다.)

export default : 한 모듈당 export default는 한 개만 넣어주자!

코드 

//경로 : pages/component.js
const HomePage = () => {
  return (
    <MainLayout>
      <Home />
    </MainLayout>
  )
}

export default HomePage;

//경로 : pages/index.js
export { default as HomePage } from './HomePage';

//경로 : routes/index.js
import { HomePage } from 'pages';

가장 기본적인 방법입니다.

 
경로 pages/index.js 부분 살펴보기

point 1. pages/component.js 부분에서 export default 로 내보내줬기 때문에 
           중간다리인 pages/index.js 부분에서도 꼭 { default as name }으로 받아줘야합니다.

point 2. { default as HomePage }라고 쓰지않고 { default as name } 라고 적은 이유는,
           as 뒷부분은 그냥 이름을 지어주는 것이기 때문에 꼭 HomPage가 아닌,
           home 이라던가 name 같은 것으로 내보내도 괜찮습니다.

→ 저같은 경우는 헷갈릴것같아, 컴포넌트 이름을 그대로 적는 편입니다.

다른 방식으로도 내보낼 수 있습니다.

//경로 : pages/component.js
export default () => {
  return (
    <MainLayout>
      <Home />
    </MainLayout>
  )
}

//뒷 부분은 동일

ES6문법을 사용해 내보내준 방법입니다.

  위에 말했다싶이 export default와 export name 차이는 이름이 있는가 없는가? 로 나눌 수 있는데,
default로 내보내주게되면 이름이 없어도 됩니다. 이미 그 당사자를 가르키고 있기때문이죠.
(반면 그냥 export로 내보내주게되면 이름이 없으면 정확히 찾지 못한답니다. →그냥 에러가 나욤)

참고

export const HomePage = () => {
  return (
    <MainLayout>
      <Home />
    </MainLayout>
  )
}

// default 값이 아닌 체로 내보냈다가 
// 중간다리에서 갑자기 맘이 변해 default로 내보내는건 안됩니다.

//경로 : pages/index.js
export {default as HomePage} from './HomePage'; 

( x ) 옳지 않은 방법입니다. 

export name : 한개든 여러개든 상관 없음!

코드 

//경로 : pages/component.js
export const HomePage = () => {
  return (
    <MainLayout>
      <Home />
    </MainLayout>
  )
}

//경로 : pages/index.js
export * from './HomePage';

//경로 : routes/index.js
import { HomePage } from 'pages';

다음과 같이 생성하고 불러올 수 있습니다. (이름 앞에 export 붙이기 )

포인트는, export name 으로 내보내주고, 값을 받아와야 하는 부분에서 { 중괄호 }를 사용해 값을 받이와야 한다는것입니다.

클래스나 함수를 내보낼 땐 세미콜론을 붙이지 마세요.

클래스나 함수 선언 시, 선언부 앞에 export를 붙인다고 해서 함수 선언 방식이 함수 선언문에서 함수 표현식(function expression) 으로 바뀌지 않습니다. 내보내 지긴 했지만 여전히 함수 선언문입니다.
대부분의 자바스크립트 스타일 가이드는 함수나 클래스 선언 끝에 세미콜론을 붙이지 말라고 권유합니다.
같은 이유로 export class나 export function 끝에 세미콜론을 붙이지 않습니다.

 

만약, export named으로 내보낸걸 꼭 default로 바꿔서 쓰고싶다면?

//경로 : pages/component.js
const HomePage = () => {
  return (
    <MainLayout>
      <Home />
    </MainLayout>
  );
};

export { HomePage };


//경로 : pages/index.js
export {HomePage as default} from './HomePage';

 

중간다리 pages/index.js 에서 { HomePage as default }

 

다른 방법으로 내보낼 수도 있습니다 ( 상단/하단에서 export 해주기)

//경로 : pages/component.js

// 상단. export { HomePage };

const HomePage = () => {
  return (
    <MainLayout>
      <Home />
    </MainLayout>
  )
}

// 하단. export { HomePage };

상단 또는 하단에서도 가능합니다.

따라서, 위치는 이름 앞, 상단, 하단

회사에서는 보통 

//경로 : lib/util.js

export funcA {
  return name = 'Lily';
}

export funcB {
  return name = 'Gomi';
}

export funcC {
  return name = 'Eunjeong';
}

//경로 : component/hello.js
import { funcA, funcB } from 'lib/utils';

와 같이, 모듈을 만들어놓고 쓸때 보통 이방법을 사용하곤 했습니다.

====================================

결론 

이전까지는 별 구분없이, 그냥 마음대로 내보내고 있었는데

여러가지 문서를 찾아보고 정리한 결과, 

실제로 한 Page를 그리는 부분에서 여러개를 내보내야하는 경우는 없었습니다.

그래서, 페이지를그리는 부분에서는 export default를!

모듈처럼 함수를 묶어논 부분엔 export를 사용하기로 정리하였습니다!!!!!!

 

참고 : ko.javascript.info/import-export