Mock Data로 json 파일 만들어서 데이터 뿌려주기
//DetailData.json
{
"product_detail": [
{
"id": 1,
"menu": "소설",
"category": "한국소설",
"thumbnail": "https://placekitten.com/129/625",
"name": "다양한 가치추가 축안녕하세요",
"rating": 5,
"patch": 1,
"sale_price": 12600,
"author_info": [
{
"name": "팀 안녕하세요(kbs)",
"country": "대한민국",
"birthdate": "1962-09-01",
"info_update": "2021-10-22",
}
]
}
]
}
//js파일
import React, { useState, useEffect } from 'react';
const [data, setData] = useState([]);
useEffect(() => {
fetch('/data/DetailData.json')
.then(res => res.json())
.then(data => {
//mock data가 출력되는지 콘솔 찍어보기
console.log('mock data=>', data);
//data를 json안에 product_detail의 첫번째 인덱스로 바꿔준다
setData(data.product_detail[0]);
});
}, []);
//조건부 렌더링
// data가 들어오면 하위 컴포넌트를 보여주기
//조건을 안 걸어주면 에러남..
return(
data && (
//data의 thumbnail키를 ImgData라는 props로 지정
<Img ImgData={data.thumbnail} />
))
//Img파일
//ImgData props를 인자로 가져온다
//{ } : 자동으로 구조분해 할당 해줌
const Img = ({ ImgData }) => {
return (
<button className="bookImgButton">
//ImgData == data.thumbnail
<img alt="bookImg" src={ ImgData } className="bookImg" />
</button>
);
};
mock data 배열안에 배열이 있는 경우
부모에서 안가져와짐.
해당 파일에 fetch 함수를 똑같이 다시 쓰기const [data, setData] = useState([]); useEffect(() => { fetch('/data/DetailData.json') .then(res => res.json()) .then(data => { console.log('mock data=>', data); setData(data.product_detail[0]); }); }, []);
const MainBox = () => { return ( data && ( //조건부 렌더 바로 밑에는 부모요소의 block이 있어야함 <ul className="categoryBox"> <StyleLink to="/"> <li>{data.menu}</li> </StyleLink> <i class="fas fa-chevron-right" /> <StyleLink to="/"> <li>{data.category}</li> </StyleLink> </ul> ))}