[React] 더미 데이터(Dummy Data) 구현

출처) https://youtu.be/PTFO5v35Q5E?si=hSUvY74mrgdxP1Tt

 

 

📍더미 데이터(Dummy Data)란?

유용한 데이터가 포함되지 않지만 공간을 예비해두어 실제 데이터가 명목상 존재하는 것처럼 다루는 정보를 의미합니다.

즉, 실제 데이터와 비슷한 형태를 가지지만 실제 의미나 가치를 가지지 않아서 주로 테스트나 프로토타이핑을 위해 사용되는 가상의 데이터를 말합니다.

 

 

📍더미 데이터(Dummy Data)를 왜 사용할까?

개발 초기 단계에서 테스트 : 실제 데이터베이스나 외부 API 연동이 준비되기 전에 애플리케이션의 기능을 테스트할 때 사용할 수 있습니다. 

즉, 더미데이터를 사용하면 실제 서버와의 통신 없이도 프론트엔드 기능을 테스트할 수 있기 때문에 백엔드 개발자가 API를 만들동안 프론트엔드 개발자가 데이터가 필요한 경우에 더미데이터를 사용하는 것입니다.

ex) 복지물품 대여 서비스 앱을 제작하던 도중, 프론트엔드 측에서 물품 리스트가 필요하다면? 더미데이터를 만들어 사용한다!

 

 

 

📍더미 데이터(Dummy Data) 구현하기

• 하드코딩
  • 더미데이터를 구현하는 가장 쉬운 방법은 코드 내에 더미 데이터를 하드코딩하는 것입니다.

const dummyData = [
  { id: 1, name: 'HyeonJin Hwang', age: 24 },
  { id: 2, name: 'JunGyo Han', age: 28 },
];

 

• 함수를 이용한 동적 생성
  • 더미데이터를 동적으로 생성할 수 있는 함수를 만들어서 사용하는 방법입니다.

function generateDummyData(count) {

  const dummyData = [];  // 더미데이터를 저장할 리스트
  
  for (let i = 1; i <= count; i++) {
    dummyData.push({ id: i, name: `User ${i}`, age: Math.floor(Math.random() * 50) + 20 });
  }
  
  return dummyData;  // 더미데이터를 반환
}


const generatedData = generateDummyData(10); // 10개의 더미 데이터 생성

 

• 외부 파일 이용하기
  • 더미데이터를 외부 JSON 파일에 저장하고 불러오는 방법입니다.

// 더미데이터가 저장되어 있는 파일 (dummyData.json)
const dummyData = [
  { id: 1, name: 'HyeonJin Hwang', age: 24 },
  { id: 2, name: 'JunGyo Han', age: 28 },
];



// 더미데이터를 사용할 파일
import dummyData from './dummyData.json';  // import해서 사용

console.log(dummyData);

 

• 더미 데이터 제공 서비스 이용하기
  • 더미데이터를 생성 및 관리하는 서비스를 사용하는 방법입니다.
  • ex) JSONPlaceholder

 

 

📍더미 데이터(Dummy Data) 구현 연습해보기

하드 코딩의 방법을 사용하여 Dummy Data(goodsName, rentalDate, returnDate, rentalState)를 list로 저장해보았습니당

 

 

그리고 map() 함수를 사용하여 <Item> 컴포넌트에 값을 주었습니다~!

 

🔎 map() 함수란?
map() 함수는 배열을 순회하며 지정된 콜백 함수를 적용하여 각 요소를 변환하고, 그 변환된 값을 모아서 새로운 배열로 반환하는 역할을 수행합니다.