이제 실제 상품명과 상세 정보를 데이터 바인딩 합시다!!
src폴더 내에 data파일을 만들어주고 실제 data가 들어있는 data.js 파일을 만들어 주었음
//data.js
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,
},
];
import/export 문법
어떤 특정파일의 데이터를 다른파일에서 쓸수있게 컨트롤 해준다
//data.js
var name='Kim';
export default name;
name이란 변수를 내보내주었다
//App.js
import name from "./data/data.js";
function App() {
return (
<div className="App">
{name}
.
.
.
원하는 곳에 import해서 사용하면 끝
내보낼 변수가 많다면??
내보내기: export {변수1, 변수2...}
가져오기: import {변수1, 변수2...} from 경로
//data.js
var name='Kim';
var name2='Park';
export {name,name2}
//App.js
import { name, name2 } from "./data/data.js";
function App() {
return (
<div className="App">
{name}
{name2}
.
.
.
이제 긴 데이터를 가진 변수를 state에 넣을수 있다
//data.js
var 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;
//App.js
import data from "./data/data.js";
import { useState } from "react";
function App() {
let [shoes, setShoes] = useState(data);
.
.
.
이제 잘 데이터 바인딩 해서 쓰기만 하면된다!!
.
.
<div className="container">
<div className="row">
<div className="col-md-4">
<img
src="https://codingapple1.github.io/shop/shoes1.jpg"
width="100%"
/>
<h4>{shoes[0].title}</h4>
<p>
{shoes[0].content} & {shoes[0].price}
</p>
</div>
.
.
상품 정보가 잘 들어갔다ㅎㅎ
html태그가 반복됨으로 컴포넌트로 만들어서 데이터바인딩 한뒤 출력해보기 (혼자 해보자)
나의 코드
function Shoes({ shoes }) { return ( <div className="col-md-4"> <img src={shoes.img} width="100%" /> <h4>{shoes.title}</h4> <p>{shoes.content}</p> </div> ); }
우선 Shoes컴포넌트를 만들고 받아온 props를 통해 출력하도록 하였다, img url은 따로 data.js파일의 데이터들에 하나씩 url을 적어주었다.
<div className="container"> <div className="row"> {shoes.map((item, i) => { return <Shoes shoes={shoes[i]} />; })} </div> </div>
shoes state를 map함수를 돌린뒤 Shoes컴포넌트를 리턴하고 props값으로 각 인덱스값의 데이터를 전달해주었다. 데이터는 3개 들어있으므로 Shoes 컴포넌트를 3번 리턴할 것이다.
각각의 데이터에 담긴 항목들이 잘 출력된다
강의에선 img url을 주는 방식을 약간 다르게 했다
<div className="container">
<div className="row">
{shoes.map((item, i) => {
return <Shoes shoes={shoes[i]} idx={i} />;
})}
</div>
</div>
각데이터의 인덱스를 전달해주는 props를 추가했다.
function Shoes({ shoes, idx }) {
return (
<div className="col-md-4">
<img
src={"https://codingapple1.github.io/shop/shoes" + (idx + 1) + ".jpg"}
width="100%"
/>
<h4>{shoes.title}</h4>
<p>{shoes.content}</p>
</div>
);
}
idx props에는 0,1,2값이 전달될 것이므로 img src옵션에 문자열을 각 url에 맞게 잘 만들어준다.
데이터가 엄청 많을경우 하나하나 입력하기는 힘들것이므로 이방법이 더 괜찮은거 같다!!!!
동일하게 잘 나온다ㅎㅎ
(map함수 쓸때 key값주는거 잊지말자!!!!!!!)
출처 : https://codingapple.com/ (코딩애플님 리액트 강의)