본문 바로가기
React

import, export로 코드 줄이기

by 루에 2021. 10. 26.
반응형

변수 및 데이터, 객체 등이 너무 길어질 경우 파일을 따로 구분하여 export하고 사용하고자 하는 파일에서 import

 

Datas.js

// export 파일당 default는 하나만 지정 가능하다.
export default [
    {
        id : 0,
        title : "White and Black",
        content : "Born in France",
        price : 120000
    },
    {
        id : 1,
        title : "Red Knit",
        content : "Born in Seoul",
        price : 110000
    },
    {
        id : 2,
        title : "Grey Yordan",
        content : "Born in the States",
        price : 130000
    }
]

 

 

Variables.js

var name = 'kim';
var name2 = 'park';

// 여러개를 export할 때 이런 양식으로. 대신 이럴경우 import할 때 임의의 이름을 지정할 수는 없다.
export {name, name2}

 

 

App.js

// 아래처럼 import 하여 사용
import datas from './Datas.js';
import {name, name2} from './variables.js';

function App() {
	return(
    	console.log({datas});
        console.log({name});
        console.log({name2});
    )
}
반응형

댓글