티스토리 뷰

자바스크립트(javascript)

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

개발자 고포고 2022. 12. 27. 15:38
반응형

[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

반응형
저작자표시

'자바스크립트(javascript)' 카테고리의 다른 글

[javascript/typescript] backend nestjs + prisma 기본 세팅(저장용)  (1) 2023.12.11
[react/javascript] 초간단 드래그 구현 react-beautiful-dnd 사용  (0) 2022.12.29
[css/javascript] simple image swipe(drag)이미지 스와이핑 드래그  (0) 2022.12.21
[react/javascript] 리액트+tailwindcss+twin.macro  (1) 2022.11.30
[react/javascript] 태블릿/모바일 구분하기  (0) 2022.11.24
댓글
반응형