[React] 외부 데이터를 받아오는 import, export

목표

서버로부터 전송받은 데이터를 React에서 사용할 수 있는 방법을 익힌다.

 

export, import

 1) data.js

let a = 10;
let b = 100;
let c = ['kim',20]
let d = {name : 'kim', age : 20 }

export {a,b,c,d}

 a, b 변수를 다른 스크립트문에서 사용할 수 있도록 export 해준다.

 

 2) App.js

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

data.js에서 a,b,c,d 변수를 가져온다.

이후로 App.js 에서는 data.js에서 받아온 a,b,c,d 데이터를 사용할 수 있게 된다.

 

JSON 형식의 데이터 읽기

 1) 서버가 전송한 JSON

let data=[
  {
    id : 0,
    title : "iPhone 14 Pro",
    content : "Born in States",
    price : 12000000
  },

  {
    id : 1,
    title : "Apple watch",
    content : "Born in Seoul",
    price : 11000000
  },

  {
    id : 2,
    title : "iPad",
    content : "Born in the States",
    price : 13000000
  }
] 

export default data;

  2) 부모 컴포넌트에서 데이터를 import하고 state값으로 만듦

import data from './data.js';


let [shoes]=useState(data)

 

 3) 부모 컴포넌트로부터 받은 shoes state 사용

function Product(props){
  return (
    <div>
      <img src={props.img[props.i]} width="80%"/>
      <h4>{props.shoes[props.i].title}</h4>
      <p>{props.shoes[props.i].content}</p>
    </div>
  )
}

 

결과

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌