[React] import / export

기록의 목적 : 잊으면 다시 보기 위해서,하찮은 내 정보가 누군가한테 도움이 되기를 바라며 정리합니다.

 

 

 

import(가져오기)

기본 JavaScript 문법입니다. 다른 파일에 있는 자료형을 가지고 올 때 사용하는 문법입니다. 주로 함수, 변수 같은 것을 가지고 옵니다. 단 export(내보내기)된 자료형만 import(가져오기) 할 수 있습니다.

 

◯ 사용방법

가져올 자료형의 개수에 따라 방법이 달라집니다. 단 여러개 가지고 올 때는 export때 사용한 자료명을 사용해야 합니다.

 

▶ 하나 가져올 때 : import 자유이름 from './경로';

import 자유이름1 from './App.js';

 

▶ 여러개 가져올 때 : import { 자료명1, 자료명2, 자료명3 } from './경로';

import { export한자료명1, export한자료명2, export한자료명3 } from './App.js';

 

export(내보내기)

기본 JavaScript 문법입니다. 자료형을 다른 파일에서 사용할 수 있게 내보낼 때 사용하는 문법입니다.

 

◯ 사용방법

내보내고 싶은 자료형의 개수에 따라 방법이 달라집니다.

 

▶ 하나 내보낼 때 : export default 자료명; / 맨 아래 export default 자료명;

// 방법1
export defaul function Home(){
  return(
    <div></div>
  )
}

// 방법2
function Home(){
  retrun(
  <div></div>
  )
}

export default Home;

 

▶ 여러개 내보낼 때 : export { 자료명1, 자료명2, 자료명3 } from './경로';

let name = 'Yoon';
let age = 25;
let hobby = 'coding';

export { name, age, hobby }