[React 기초] Import / Export

 

"<link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">"  

상위의 link 태그 속성처럼 다른 폴더의 파일을 가져올 수 있는 방법이 있는데, 웹 퍼블리싱을 조금이라도 접해보았다면, @import는 한번 쯤 접해봤을 것이다.

 

(필자는 구글폰트에서 웹폰트를 가져올 때 주로 사용했었다. 하위에 예시 참고)

 

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
</style>

 

React에서도 다른 폴더에 있는 모듈이나, 파일을 불러올 수 있는데 그 때 사용하는 것이 "import"이다. 만약 경로를 지정하지 않는다면 어느 폴더에서 파일을 가져오는 것일까?

 

경로 지정을 하지 않았을 때에는 node_modules

모듈은 설치하게 되면 node_modules에 모듈의 파일이 저장되게 됩니다.

node_modules에 설치된 모듈을 불러올 때에는, 경로를 지정할 필요 없이 모듈 이름만 작성하면 됩니다.

그렇기 때문에 우리는 리액트 모듈을 설치했을 때 따로 경로 지정을 해 두지 않아도 바로 리액트 모듈을 불러올 수 있습니다.

 

import 하여 모듈을 가져온 모습

import는 모듈이나 다른 파일을 가져오는 것이기 때문에 쉽지만 export는 무엇일까?

 

export도 단어 그 뜻대로 "내보내는 것" 이다.

emotion을 사용한 css-in-js

상위에 있는 이미지를 보면 css-in-js를 작성할 때, 모든 변수들 앞에 export를 삽입해놓은 것을 볼 수 있는데,

export를 삽입 해줘야 컴포넌트 내에서 사용을 할 수 있기 때문에 export를 삽입해줘야 한다