Dumy Data Implementation, map()

React에서 더미 데이터(Dummy Data)와 map() 반복문을 사용하는 것은 컴포넌트가 실제 API 데이터 없이도 데이터 목록을 처리하는 방식을 테스트하거나, 여러 개의 컴포넌트를 동적으로 렌더링할 때 유용합니다. 특히  리스트 렌더링에서 자주 활용되는 패턴입니다.

1. Dummy Data란?

더미 데이터(Dummy Data)는 주로 애플리케이션 개발 초기나 테스트 단계에서 임시로 사용하는 데이터를 의미합니다. 더미 데이터는 실제 API로부터 데이터를 받아올 때까지 UI가 어떻게 렌더링될지 확인하거나, 컴포넌트가 예상한 대로 동작하는지 확인하는 데 유용합니다.

예제: Dummy Data 생성하기

더미 데이터는 일반적으로 JSON 형식이나 JavaScript 객체 배열로 작성합니다. React 컴포넌트에서 바로 사용할 수 있도록, 데이터 파일을 따로 만들어 관리할 수도 있습니다.

// data.js 파일에 작성한 더미 데이터
export const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 28 },
];

위와 같은 객체 배열 형태로 데이터를 작성하고, 이 데이터를 컴포넌트에 import하여 사용할 수 있습니다.

---

2. map()을 사용한 반복 렌더링

map() 함수는 JavaScript 배열 메서드 중 하나로, 배열의 각 요소에 함수를 적용하여 새로운 배열을 반환합니다. React에서는 map()을 사용하여 더미 데이터의 각 항목을 컴포넌트로 변환해 UI에 동적으로 렌더링하는 데 주로 사용됩니다.

기본 사용법

array.map((item, index) => {
  // 반환할 JSX 요소
});

예제: 더미 데이터를 map()으로 렌더링하기

// UserList.js 컴포넌트
import React from 'react';
import { users } from './data'; // 더미 데이터 import

function UserList() {
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            Name: {user.name}, Age: {user.age}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

설명:

• users.map((user) => ... ): users 배열의 각 user 객체에 대해 li 요소를 반환합니다.
• key 속성: React에서는 반복되는 요소를 렌더링할 때 key 속성을 사용해 각 항목에 고유한 식별자를 부여합니다. user.id를 key로 사용하면 React가 각 항목을 효율적으로 식별할 수 있어 성능이 개선됩니다.

---

3. key 속성의 중요성

React에서는 리스트를 렌더링할 때 key 속성을 꼭 부여해야 합니다. key는 각 항목이 고유하게 식별되도록 만들어, React가 상태 변화나 재렌더링 시 각 항목을 추적할 수 있도록 합니다.

• 효율적인 업데이트: key가 없으면 React는 각 요소를 재렌더링해야 하지만, key를 통해 변화된 부분만 업데이트하여 성능을 최적화할 수 있습니다.
• 고유한 값: key는 항상 배열 내에서 유일해야 하며, 일반적으로 ID 값을 사용하는 것이 좋습니다. 예를 들어, 배열의 인덱스는 고유하지 않을 수 있어 피하는 것이 좋습니다.

{users.map((user) => (
  <li key={user.id}>
    Name: {user.name}, Age: {user.age}
  </li>
))}

---

4. JSX에서 map() 반복문 활용

map() 반복문을 통해 JSX를 동적으로 생성하여 렌더링할 수 있습니다. 아래는 더미 데이터를 사용하여 사용자 목록을 보여주는 컴포넌트입니다.

예제: JSX에서 map() 반복문 사용

function ProductList() {
  const products = [
    { id: 1, name: "Laptop", price: 1000 },
    { id: 2, name: "Phone", price: 500 },
    { id: 3, name: "Tablet", price: 800 },
  ];

  return (
    <div>
      <h2>Product List</h2>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name} - ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

설명:

• products 배열의 각 항목은 product 객체로, map()을 통해 <li> 요소로 변환됩니다.
• product.id를 key로 지정하여 React가 각 항목을 추적할 수 있게 합니다.

---

5. 더미 데이터와 map()을 사용한 조건부 렌더링

데이터에 따라 조건부 렌더링을 수행하려면, map() 내에서 조건을 추가하여 특정 항목만 렌더링할 수 있습니다.

function AdultList() {
  const people = [
    { id: 1, name: "Alice", age: 25 },
    { id: 2, name: "Bob", age: 17 },
    { id: 3, name: "Charlie", age: 28 },
  ];

  return (
    <div>
      <h2>Adults Only</h2>
      <ul>
        {people
          .filter((person) => person.age >= 18) // 성인만 필터링
          .map((adult) => (
            <li key={adult.id}>{adult.name} - Age: {adult.age}</li>
          ))}
      </ul>
    </div>
  );
}

설명:

• filter()로 성인만 포함된 배열을 생성한 후, map()으로 성인의 이름과 나이를 렌더링합니다.
• 조건부 렌더링을 통해 조건에 따라 UI가 달라질 수 있도록 합니다.

---

6. map()과 컴포넌트 조합

더미 데이터를 사용하는 컴포넌트 내에서 또 다른 컴포넌트로 데이터를 전달할 수 있습니다. 이는 컴포넌트 재사용성을 높이는 데 유용합니다.

예제: 더미 데이터를 하위 컴포넌트로 전달

// Product.js
import React from 'react';

function Product({ name, price }) {
  return (
    <li>
      {name} - ${price}
    </li>
  );
}

export default Product;

// ProductList.js
import React from 'react';
import Product from './Product';

function ProductList() {
  const products = [
    { id: 1, name: "Laptop", price: 1000 },
    { id: 2, name: "Phone", price: 500 },
    { id: 3, name: "Tablet", price: 800 },
  ];

  return (
    <div>
      <h2>Product List</h2>
      <ul>
        {products.map((product) => (
          <Product key={product.id} name={product.name} price={product.price} />
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

설명:

• Product 컴포넌트는 ProductList에서 전달된 name과 price props를 사용해 각 제품의 정보를 렌더링합니다.
• ProductList는 더미 데이터를 map()으로 반복하여 각 항목을 Product 컴포넌트로 전달함으로써 재사용 가능한 컴포넌트 구조를 만들었습니다.

---

정리

• 더미 데이터는 테스트 목적으로 임시 데이터를 사용하여 컴포넌트를 개발하고 UI를 시각화하는 데 유용합니다.
• map()은 배열의 각 요소에 대해 JSX 요소를 생성하여 목록을 렌더링할 때 사용합니다.
• key 속성을 사용하여 React가 각 요소를 고유하게 식별할 수 있도록 해야 합니다.
• 컴포넌트 재사용성: map()을 통해 동적으로 컴포넌트를 반복 렌더링하고, 하위 컴포넌트로 데이터를 전달함으로써 구조를 더 효율적으로 만들 수 있습니다.

이러한 방식으로 더미 데이터와 map()을 활용하면 React에서 데이터를 효율적으로 다루고, 재사용 가능한 컴포넌트를 작성할 수 있습니다.