[TIL] Day 32. export default의 의미에 대해

우리가 react로 코딩을 하다보면 많은 경우에 우리가 쓴 코드를 다른 코드에서 활용하기 위해 import 해오는 경우가 많습니다. 우리가 다른 파일을 import 해오기 위해선 해당 js 파일에서 export를 해주는 것이 중요합니다. 그때 코드의 마지줄에 'export default' 라는 단어를 붙이는 경우가 많습니다. 지금까지는 그냥 아무생각 없이 써왔지만, 오늘 문득 왜 그런 단어를 붙이는지 궁금해졌습니다. 그래서 오늘 포스팅은 이에 대한 얘기를 해보려고 합니다.

 

1. export 

 

우리는 꼭 default 라는 단어를 export 앞에 붙이지 않아도 코드를 다른 곳으로 보내 활용할 수 있습니다. 

 

const hello = "Hello World!"

export {hello};

 

이런 식으로 코드를 작성하게 되면 해당 변수에 담겨있는 데이터를 객체 형식으로 전달하겠다는 의미를 담게 됩니다. 이렇게 전달된 객체의 데이터를 필요한 코드에서 import 해와서 쓰게 되는 것이죠.

 

이 경우에는 다음과 같이 코드를 작성할 수도 있습니다.

 

export const hello = "Hello World!"

 

2. export default

 

export defult는 변수, 함수, 오브젝트, 클래스 등을 전달할 수 있는 명령어입니다. 이렇게 export 뒤에 default를 붙이게 되면 중괄호 없이 변수 등을 import 해올 수 있습니다. 

 

const hello = "Hello World!"

export default hello

...

import hello from "경로"

 

만약 export default 값을 중괄호로 감싸게 된다면 해당 내용의 데이터가 객체로서 전달되는 것을 보실 수 있습니다.

 

3. 마무리

 

오늘은 react에서 자주 사용하는 export default의 의미에 대해 알아보았습니다. 별 것 아닌 내용일 수 있지만, 그래도 우리가 쓰는 코드라면 그 코드 하나하나에 담긴 의미를 잘 알고 있는 것이 중요하다는 생각에 작성해 보았습니다. 그러면 오늘도 조금 더 성장한 개발자가 되시길 바랄게요!!

 

참고 블로그: m.blog.naver.com/gi_balja/221227430979