더미데이터(dummy data) 만들기 / 더미 이미지 사이트

 

 

여러개의 더미데이터 생성 방법

 

import React, { useEffect, useState } from "react";
import PostListItem from "./PostListItem";
import faker from "faker";
import { nanoid } from "nanoid";

const PostList = () => {
  const [postData, setPostData] = useState({
    posts: [],
    loadPosts: false,
  });

  const dummyPosts = (number) => {
    return Array(number)
      .fill()
      .map(() => ({
        id: nanoid(),
        content: faker.lorem.paragraph(),
        imageUrl: faker.image.imageUrl(),
      }));
  }; // 10개의 데이터를 가진 배열이 생성된다.

  useEffect(() => {
    setPostData({
      ...postData,
      posts: [...postData.posts, ...dummyPosts(10)],
    });
  }, []);

  return (
    <div>
      {postData.posts.map((post) => (
        <PostListItem post={post} key={post.id} />
      ))}
    </div>
  );
};

export default PostList;

 

서버가 구동되면 데이터를 받아서 오는 것 처럼

처음엔 post가 빈 값이였다가 useEffect로 처음 렌더링이 되었을 때 데이터를 추가하는 방식이다.

 

id생성은 nanoid를 사용했고

content는 사실 고정된 내용을 사용해도 되지만

랜덤 데이터를 가져오는 방법으로 faker를 사용했는데

이슈가 있어서 버전5를 사용했다.

 

 

 

랜덤으로 출력하는 더미이미지 사이트

http://placeimg.com/

PlaceIMG | Easy FPO and Dummy Images for Any Project

 

원하는 크기의 더미이미지 생성 사이트

https://placeholder.com/

Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers