React export import

 

데이터가 너무 많거나 등등 파일을 분리하는 경우

불러오는 방법을 크게 두가지로 사용할 수 있음. 

 

1. default export 

대부분 이걸 사용하며, 모듈에서 한가지 주요한 것을 내보낼때 사용함. 

 

data.js 생생하고 아래와 같이 작성

let a = 10;
let b = 20;
let data = [
    {
        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
    }
];

export default { a, b, data };

맨 아랫줄에서 내보낼 변수명을 차례로 씀.

컴포넌트도 export가능함. 

 

 

이제 위 파일을 app.js로 불러오려고 하면

import myData from './data.js';

const { a, b, data } = myData;

이렇게 불러와야 한다. 데이터가 한데 묶여서 전부다 날아오기 때문. 

하나로 받아서 풀어서 써야한다. 

 

 

2. named export

이건 하나의 모듈에서 여러가지 데이터를 다양하게 내보낼때, 그 기능중 일부만 사용하는 경우가 많은 경우 사용함 

data.js 생성 (각 각 따로 export해준다)

export const a = 10;
export const b = 20;
export const data = [
    {
        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
    }
];

그리고 불러올때는

import { a, b, data } from './data.js';

이렇게 가져오는데, 아래처럼 일부만 가져올 수 도 있다.

import { data } from './data.js';

 

---

 

 

그리고 사용

 

그리고 app(){}내부 return문 외부에 아래처럼 써줌

let [shoes]= useState(data);

 여기서 대괄호를 써주는 이유는, 내부 데이터의 첫번째 값에 접근하기 위해 구조분해할당을 이용하는 것임. 

위 사진 위에꺼가 console.log(shoes);

아래꺼는 let shoes2 = useState(data); console.log(data2);

 

아래꺼를 보면 두번째 배열이 비어있는데, state변경함수 부분이다. 여기선 변경함수가 필요가 없으므로 사용하지 않았다.

데이터 부분만 꺼내기 위해 구조분해할당을 사용하는 것임.

 

구조분해할당 예시(더보기 클릭)

배열

let [first, second, third] = ['Open', 'AI', 'GPT-4'];

console.log(first); // "Open"
console.log(second); // "AI"
console.log(third); // "GPT-4"

객체

let {name, age} = {name: 'John', age: 30};

console.log(name); // "John"
console.log(age); // 30

데이터 가져오기

data는 보기에 어려워보이지만, 시작 기호를 잘 보면서 하나씩 접근하면 어렵지 않음.

우선 data의 구조를 보자.

let data = [
    {
        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
    }
];

여기서 처음 기호는 [ 이고, 배열이다 .

그럼 첫번째 상품에 접근하기 위해 [0]으로 접근함

  console.log(shoes[0]);
//{id: 0, title: 'White and Black', content: 'Born in France', price: 120000}

여기서 이제 다음 값에 접근하면 된다. 이건 object 자료형 이므로, .key 로 접근.

  console.log(shoes[0].content);
//Born in France