Import & Export

⚙︎ import

   정적 import 는 다른 모듕레서 내보낸 바인딩을 가져올 때 사용한다. 이때 가져오는 모듈은 무조건 strict mode이다. 또한 HTML 안에 작성한 스크립트에서는 import를 사용할 수 없다. 또한 함수형 구문을 가진 동적 import()도 있다.

import {Mytitle, Font, Containal} from '../../styles/emotion'

export default function EmotionPage() {

    return (
      <div>
        <Font>아이디</Font>
        <input type="text"/>
        <Font>비밀번호</Font>
        <input type="password"/>
      </div>
    )
}

위의 코드를 보면 'styles/emotion' 를 import 하여 JSX부분에 적용시킨 모습을 볼 수 있다

⚙︎ export

   export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 내보낸 값은 다른 곳에서 import 문으로 가져가 사용할 수 있다. export 또한 무조건 stric mode 이며 HTML 안에 작성한 스크립트에서는 사용할 수 없다.

import styled from '@emotion/styled'

export const Mytitle = styled.div`
    color: black;
    font-size: 20px;
` 
export const Font = styled.div`
    font-size: 3px;
`

위으 코드를 보면 Mytitle 을 div로 export한 것을 볼 수 있다.

이처럼 export가 있어야만 import를 할 수있으며 코딩을 좀더 효율적으로 할 수 있게된다.

[참고한 사이트] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import