목표
서버로부터 전송받은 데이터를 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 > 코딩애플 강의' 카테고리의 다른 글
[React] 다른 자바스크립트 파일의 컴포넌트 가져오기 (0) | 2023.07.03 |
---|---|
[React] react-router-dom 라이브러리 (0) | 2023.07.03 |
[React] 이미지 넣기 (0) | 2023.07.03 |
[React] Bootstrap 사용하기 (0) | 2023.07.03 |
[React] state Array 삽입 및 삭제 (0) | 2023.07.03 |