[React] Import, Export 사용법

React 를 컴포넌트로 관리하게 될 때 컴포넌트로 만든 js 파일이나 렌더링할 내용이 있는 jsx 파일을 사용하려면 export를 해주어야 하고, 그 컴포넌트를 사용하는 파일에서는 import 를 시켜주어야 합니다.

이 export와 import를 사용하는 방법을 조금 더 알아보겠습니다.

 

 

단일 Export / Import

math.js

const pi = 3.1415962;

export default pi;

 

index.js

import React from "react";
import ReactDOM from "react-dom";
import pi from "./math"

ReactDOM.render(
  <ul>
    <li>{pi}</li>
  </ul>,
  document.getElementById("root")
);

 

컴포넌트인 math.js 에서 단일의 변수를 생성 해주고 기본값으로 해당 변수를 지정하여 export 해주었습니다.

이 export된 math.js의 pi를 index.js에서 import 시켜 render 함수에 사용하였습니다.

이 방법이 가장 기본적이고 기초적인 export import 방법입니다.

 

결과

 

 

 

하나의 컴포넌트에서 다중 내용 export

math.js

const pi = 3.1415962;

function doublePi(){
  return pi * 2;
}

function triplePi(){
  return pi * 3;
}

export default pi;
export {doublePi, triplePi};

 

index.js

import React from "react";
import ReactDOM from "react-dom";
import pi, {doublePi, triplePi} from "./math"

ReactDOM.render(
  <ul>
    <li>{pi}</li>
    <li>{doublePi()}</li>
    <li>{triplePi()}</li>
  </ul>,
  document.getElementById("root")
);

컴포넌트 math.js 파일에서 pi 변수 뿐만 아니라 function 2개를 추가하여 해당 내용들을 전부 export 시켜주었습니다.

여기서 이 컴포넌트의 기본 export 값은 pi 변수이고, 나머지 function 내용들은 default 가 아니기 때문에 default 키워드는 기입하지 않습니다.

뿐만 아니라 중괄호로 해당 내용들을 묶어서 export 시킵니다.

당연한 말이지만 export 할 때 지정한 변수명 및 function 명이 똑같이 기입해야 합니다.

 

index.js에서는 컴포넌트 파일에서 export 된 내용들을 똑같이 import 시켜주었습니다.

여기서 pi 부분은 임의로 원하는 명으로 지정할 수 있으나 다중으로 묶여서 들어온 다른 내용들은 컴포넌트 export 명과 똑같이 지정해주어야 합니다.

 

사용할 때는 변수는 그대로 변수명 (pi)를 중괄호 안에 넣어 사용하면 되고, function 타입의 export 데이터는 () 괄호를 붙여주어야 합니다.

 

결과

 

 

와일드카드를 사용해 하나의 컴포넌트에서 다중 내용 export

math.js

const pi = 3.1415962;

function doublePi(){
  return pi * 2;
}

function triplePi(){
  return pi * 3;
}

export default pi;
export {doublePi, triplePi};

 

index.js

import React from "react";
import ReactDOM from "react-dom";
import * as pi2 from "./math";

ReactDOM.render(
  <ul>
    <li>{pi2.default}</li>
    <li>{pi2.doublePi()}</li>
    <li>{pi2.triplePi()}</li>
  </ul>,
  document.getElementById("root")
);

컴포넌트에는 다중의 내용들을 export 시켜주고 있고, index.js 에서 import 할 때 * 와읻르카드로 전체 내용들을 import 시켜주면서 이름은 pi2 로 지정하였습니다.

와일드카드는 전체의 내용을 지칭하는 기호입니다.

 

이제 사용할 때 import 시킨 변수에 .{export 데이터 명} 양식으로 사용할 수 있습니다.

이 때 기본 export 데이터는 pi2.default 를 중괄호에 넣어 사용해야 하고, 그 이외의 default가 아닌 export 데이터들은 그대로 pi2.{export 데이터 명} 양식으로 사용하면 됩니다.

 

이렇게 와일드카드를 통해서 한번에 묶어서 사용할 수도 있지만, 이 와일드카드를 지원하지 않는 파일도 있기 때문에 그럴 때는 다른 방식으로 import 해주면 됩니다.

 

결과