서버에서 상품 데이터 가져와주세요~

1. useState import 해오기

import {useState} from "react";

1. 변수에 state 저장

let [shoes] = useState()

1. src 폴더 안에 data.js 파일 만들기

→ data.js에 데이터 object 자료들 모두 저장

다른 파일에 있던 변수(자료) 가져오려면 import/export 문법 사용해야함

(1) 변수가 1개일 때 : export default 변수명

1. 변수를 export default 하고

**export default** 변수명

let a = 10;

export default a;

1. import 하면 끝

import 작명 from '파일경로' 

import 가져온변수 from './data.js' 

1. 사용할 때는 중괄호 사용

{ 작명 }

{ 가져온변수 }

(2) 변수가 여러개 일 때 : export {변수1, 변수2}

• export 여러개 하려면 중괄호사용

**export** {변수1, 변수2}

let a = 10;
let b = 100;

**export** {a, b}

→ export default 아님!!!

• import 여러개 하려면

import {변수1, 변수2} from ‘경로’

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

→ export 해온 변수명 그대로 사용해야함!!!

→ 자유롭게 작명할 수 없음!!!

export/import 문법 정리

1. 변수가 한 폴더에 단 한개

• export default 변수명
• import 할 때 자유롭게 작명 가능
• import 변수명 from ‘경로’

2. 변수가 한 폴더에 여러개

• export 변수명
• import 할 때 자유롭게 작명 불가능. export에 사용한 변수명 사용해야함
• import {변수명1, 변수명2} from ‘경로’;

실습

1. export 하기

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** data;

→ data 변수가 하나니까 export default

자료형

[ ] array 자료형

let a = ['kim', 20]
a[0] //kim 출력

{ } object 자료형

→ 자료 이름을 작명해야함

let b = { **name** : 'kim', **age** : 20 }
b.**name** //kim 출력

복잡한 자료에서 데이터 뽑을 땐 시작 기호만 잘 보면 된다!

시작이 [ 이거면 array 자료임!!

→ [indexing]

let shoes = ['nike', 'adidas']

**shoes[0]** //nike

변수명[indexing]

시작이 { 이거면 object 자료임!!

→ [indexing].원하는자료

let shoes = { name : 'nike', price : '100000'}

shoes[0].price //1000000

변수명[indexing].key값

let data = [{1번상품정보}, {2번상품정보}, {3번상품정보}]

→ 여기서 자료 뽑을 때는

<h4>{shoes[0].title}</h4>

1. import 하기

import data from './data.js';

1. state 로 사용하기

let [shoes] = useState(data)