[React] export, import

모듈을 불러오는 방식으로 import를 사용할 수 있습니다. 

기존에 axios를 <script> 태그를 활용해서 라이브러리를 불러온 경험이 있습니다. 

하지만 ES6 부터는 import를 사용해서 라이브러리를 불러올 수 있습니다.

 

1. import

React 폴더를 지정해주고 React 환경을 만들면 아래와 같이 index.js 가 import 하는 것을 확인할 수 있다.

(React 폴더지정 링크)

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

여기서 .은 현재 같은 경로에 있는 것을 말하고 ./index.js 는 같은 경로에 있는 index.js를 불러온다는 의미이다. (.은 현재경로)

라이브러리 및 .js 파일을 불러올 수 있습니다.

 

2. export

App.js로 들어가보면 마지막 줄에 export default App; 을 찾아볼 수 있다. 

export를 사용해서 메서드를 밖에서 쓰도록 선언할 수 있다. 

default는 하나의 메서드만 내보내기를 하겠다는 의미이다. 단일 

App.js (마지막줄)

export default App;

index.js

import App from './App';

default를 사용해서 export를 하게 되면, import 할 때 App이 아닌 다른 명으로 사용 가능하다. 

 

 

3. 여러 객체를 Export , Import 하기

export를 각각에다가 직접 선언해줘도 되고,

export를 마지막에 묶어서 한꺼번에 선언해줘도 된다. 

 exportTest.js

// 1. export를 바로 붙이기

export function funcA(){

    console.log("funcA")

}

export const varA = 'varA';

 

 

// 2. export를 나중에 붙이기

function funcB(){

    console.log("funcB")

}

const varB = 'varB';

export {funcB, varB}

 

 

여러 개를 export 한 것을 불러오는 방법은 아래와 같다. 

from으로 해당 파일 명을 작성하고, 중괄호를 통해 불러오는 방식을 사용한다. 

 App.js의 일부

import {funcA , funcB, varA, varB}  from './exportTest.js'

 

function App() {

  funcB();

  funcA();

  console.log(varA);

  console.log(varB);

 

결과