import, export

이빈·2023년 11월 21일
0

react

목록 보기
8/20

export / import란?

긴 데이터를 state에 집어 넣을 때, 따로 파일을 만들어 저장하고 가져다 쓸 수 있다!
예를 들어, data.js 파일에 데이터를 넣어 놓고, export 해준 뒤,
메인 페이지에서 import하여 가져다 쓸 수 있다!

export / import 문법

(data.js 파일)

let a = 10;
export default a;

export default 변수명; 이렇게 쓰면 원하는 변수를 밖으로 내보낼 수 있.

(App.js 파일)

import a from './data.js';
console.log(a)

import 작명 from './파일경로' 하면 된다.

[유의점]

  • 변수, 함수, 자료형 전부 export 가능

  • 파일마다 export default 라는 키워드는 하나만 사용 가능

  • 파일경로는 ./ 부터 시작 (현재경로라는 뜻임)

export { } / import { } 문법

여러개의 변수를 내보내고 싶으면, {}를 쓴다.

(data.js 파일)

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }
(App.js 파일)

import { name1, name2 } from './data.js';

[유의점]

  • export { } 했던 것들은 import { } 쓸 때 자유작명이 불가능합니다. export 했던 변수명 그대로 적어야함

0개의 댓글