개발을 하다보면 외부에서 모듈을 가져오는 경우가 많고, 내가 만든 함수를 외부로 내보낼 일도 많다.

이럴 때 사용하는 것이 바로 import와 export 키워드.

<br

1. import.

우선 모듈을 가지고 오는 import의 사용 방법이다. import의 사용방법은 export 방식에 따라 2가지로 나뉜다.

1. 하나의 개체만 내보내지고 있는 경우.
   -> import styled from 'styled-components';

2. 둘 이상의 개체가 내보내지고 있는 경우.
   -> import { useState } from 'react';

양측의 차이점은 중괄호{}의 사용 유무이다. 사실 이해하기가 그렇게 어렵지가 않는 것이 JS의 구조분해 할당에서 배웠던 개념과 동일한 내용에 해당한다. 가령 상위 컴포넌트에서 하위 컴포넌트로 props를 전달할 때, 하위 컴포넌트에서 구조분해 할당으로 위에서 전달된 props를 {}을 통해 개별적으로 꺼내올 수 있는데, import 키워드에서도 동일한 방법이 사용되고 있는 것이다.

export const Up = () => {

    const a = 'a';

    return (

            <Down data={a} />

    );

};

(...)

// 구조분해 할당을 사용하지 않을 경우.

export const Down = (props) => {

    const b = props.data;

};

// 구조분해 할당을 사용할 경우.

export const Down = ({ data }) => {

    const b = data;

};

• import와 export 모두 as 키워드를 사용하여 별칭을 설정해 줄 수 있다.

2. export.

1. 하나의 개체만 내보내지고 있는 경우.
   -> export default라는 또다른 키워드를 사용한다.

이 경우 내보낼 대상의 이름이 없어도 내보낼 수 있다. 어차피 하나만 내보낼 수 있기 때문.

2. 둘 이상의 개체가 내보내지고 있는 경우.
   -> 변수, 함수, 클래스 모두 export의 대상이 될 수 있다.

변수, 함수, 클래스 선언문 가장 앞에 export 키워드를 작성하거나, 내보낼 대상의 이름을 코드 마지막에 export 키워드와 같이 사용해주면 된다.

export function a() {
    //...
};

or

export {a};

3. require?

JS 자료를 찾아보다보면 분명 import가 있을 자리에 require라는 키워드가 대신 사용되는 것을 볼 수 있다. 이는 역할을 동일하지만 같은 JS에서도 사용할 수 있는 조건이 다른 키워드이다.

큰 차이점은 다음과 같다.

const { Command } = require('commander');
const fs = require('fs');

import styled from 'styled-components';
import { useState } from 'react';

require는 import와 달리 JS에서 변수나 함수를 선언하듯이 사용한다.

또한 require()는 CommonJS를 사용하는(Node.js) 환경에서 사용할 수 있고, import()는 ES6 환경에서만 사용할 수 있다.

• 양자간의 차이는 훗날 Node.js를 공부했을 때 더 알아보기로 하겠다.