통신하기

내용

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>
))}