UUID에 대해서 알아보자!

고유한 식별자를 생성하는데 사용되는 알고리즘입니다. 이 알고리즘은 네트워크에서 생성된 모든 UUID가 전 세계적으로 고유함을 보장하며, 이는 시간과 공간에 무관하게 중복되지 않음을 의미합니다.

고유성: UUID는 전 세계 어디서든 고유하게 생성될 수 있습니다. 이는 데이터베이스, 파일, 클라우드 등에서 객체를 고유하게 식별하는 데 필수적인 요소입니다.
비추적성: UUID는 랜덤하게 생성되므로, 생성된 UUID만으로는 생성 주체나 시간, 위치 등을 추적할 수 없습니다. 이러한 특성으로 인해 개인정보 보호와 같은 분야에서 중요한 역할을 합니다.
확장성: UUID는 국제 표준이며, 확장 가능한 길이를 가지고 있어 미래에도 충분한 고유 식별자를 생성할 수 있습니다.

설치

npm i uuid는 Node.js 환경에서 Universally Unique Identifier (UUID)를 생성하는 데 사용되는 uuid라는 패키지를 설치하는 명령어입니다.

npm install uuid

사용법

'uuid' 라이브러리는 웹 서버에서 요청 추적, 데이터베이스 레코드의 고유 식별 등을 위해 사용됩니다.
v1 또는 v4 함수를 호출하여 UUID를 생성할 수 있습니다.
UUID는 각 호출 시마다 고유한 값을 생성하므로, 같은 프로젝트 내에서 중복 사용을 피해야 합니다.
UUID는 랜덤하게 생성되므로 예측이 불가능하며, 이 때문에 암호화 키나 비밀번호로의 직접 사용은 권장되지 않습니다.
React와 같은 프레임워크에서 컴포넌트의 key 값으로 UUID를 사용할 경우, 렌더링마다 새로운 값이 생성될 수 있어 예상치 못한 렌더링 문제가 발생할 수 있습니다.

const { v1: uuidv1, v4: uuidv4 } = require('uuid');

console.log(uuidv1()); // '6c84fb90-12c4-11e1-840d-7b25c5ee775a'
console.log(uuidv4()); // '16fd2706-8baf-433b-82eb-8c7fada847da'

예시

예시에서는 각 엘리먼트에 대한 고유한 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>
    )
}

TECH.KAKAO.GG

UUID에 대해서 알아보자!

설치

사용법

예시