[react/javascript] 목업 데이터로 작업하기

[react/javascript] 목업 데이터로 작업하기

 

 

public/datas/data.json 만들기

[
    {
      "title": "lakers",
      "category": "NBA",
      "time": "18 hours ago",
      "src": "https://i.ytimg.com/vi/qz1ViQRfpI8/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDzGvbfuMjCnAAk-Xufg2tbf7UBAg"
    },
    {
      "title": "lakers",
      "category": "NBA",
      "time": "18 hours ago",
      "src": "https://i.ytimg.com/vi/qz1ViQRfpI8/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDzGvbfuMjCnAAk-Xufg2tbf7UBAg"
    },
    {
      "title": "lakers",
      "category": "NBA",
      "time": "18 hours ago",
      "src": "https://i.ytimg.com/vi/qz1ViQRfpI8/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDzGvbfuMjCnAAk-Xufg2tbf7UBAg"
    },
    {
      "title": "lakers",
      "category": "NBA",
      "time": "18 hours ago",
      "src": "https://i.ytimg.com/vi/qz1ViQRfpI8/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDzGvbfuMjCnAAk-Xufg2tbf7UBAg"
    },
    {
      "title": "lakers",
      "category": "NBA",
      "time": "18 hours ago",
      "src": "https://i.ytimg.com/vi/qz1ViQRfpI8/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDzGvbfuMjCnAAk-Xufg2tbf7UBAg"
    },
    {
      "title": "lakers",
      "category": "NBA",
      "time": "18 hours ago",
      "src": "https://i.ytimg.com/vi/qz1ViQRfpI8/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDzGvbfuMjCnAAk-Xufg2tbf7UBAg"
    },
    {
      "title": "lakers",
      "category": "NBA",
      "time": "18 hours ago",
      "src": "https://i.ytimg.com/vi/qz1ViQRfpI8/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDzGvbfuMjCnAAk-Xufg2tbf7UBAg"
    }
  ]

 

#사용

import React, { useEffect, useState } from "react";

const Home = () => {
  const [list, setList] = useState([]);
  useEffect(() => {
    fetch("/datas/data.json")
      .then((res) => res.json())
      .then((data) => {
        setList(data);
        // console.log(data);
      });
  });

  return (
    <div className="grid grid-flow-col grid-rows-5" >
      {list.map((item) => {
        return (
          <div>
            <div>{item.title}</div>
            <img src={item.src} alt="" />
          </div>
        );
      })}
    </div>
  );
};

export default Home;

 

#목업 #목업데이터 #mockup #sample #react #javascript