UUID에 대해서 알아보자!

• 예시에서는 각 엘리먼트에 대한 고유한 key 생성을 위해 uuidv4()를 사용하고 있습니다. uuidv4는 고유성이 보장되어 각 엘리먼트의 고유한 key 생성에 적합합니다.
• uuidv4()를 map 함수 내부에서 호출하면, 컴포넌트가 다시 렌더링될 때마다 새로운 key가 생성됩니다. 이는 React에서 불필요한 다시 렌더링을 유발하고 성능을 저하시킬 수 있으며, 상태 유지에 문제를 일으킬 수 있습니다.
• 해결책으로, 만약 rewards의 각 항목이 이미 고유한 id를 가지고 있다면, 그 id를 key로 사용하는 것이 좋습니다. 그렇지 않다면, rewards 데이터를 처음 생성하거나 받아올 때 각 항목에 uuid를 부여하고, 그 uuid를 key로 사용하는 것이 권장됩니다. 이 방법을 통해 컴포넌트가 다시 렌더링될 때마다 새로운 key가 생성되는 문제를 방지할 수 있습니다.

import React from 'react'

import { v4 as uuidv4 } from 'uuid'

export default function Reward({ rewards }) {
    return (
        <div className="p-6">
            <h2 className="mb-4 text-2xl font-bold">보상</h2>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
                {rewards.map((reward) => (
                <div className="rounded-lg border p-4" key={uuidv4()}>
                    <h3 className="text-xl font-semibold">{reward.name}</h3>
                    <span className="text-sm text-gray-500">{reward.type}</span>
                    <ul className="mt-2 list-inside list-disc">
                    {reward.items.map((item) => (
                        <li key={uuidv4()}>{item}</li>
                    ))}
                    </ul>
                </div>
                ))}
            </div>
        </div>
    )
}