UUID란

universally unique identifier: 네트워크 상에서 고유성이 보장되는 id를 만들기 위한 표준 규약

UUID는 128비트의 숫자이며, 16진수로 표현된다. 여기에 8-4-4-4-12 글자마다 하이픈을 집어넣어 5개의 그룹으로 구분한다. 길이는 36자이다

//형식
aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee

//ex
3F2504E0-4F89-11D3-9A0C-0305E82C3301
550e8400-e29b-41d4-a716-446655440000

UUID 버전은 1, 2, 3, 4, 5가 존재하는데, 이 중 많이 쓰이는 것은 버전 1과 4다!

---

버전 1: 타임스탬프를 기준으로 생성

⇒ 생성 장치에 특정한 값(일반적으로 MAC 주소)을 결합해 해당 시간에 해당 호스트의 고유한 출력을 생성한다

---

버전 2: DCE 이용해 생성

⇒ DCE(분산 컴퓨팅 환경)와 함께 사용하기 위해 버전 1의 발전된 버전으로 개발되었지만, 거의 사용되지 않는다

---

버전 3: MD5(이름 기반) 해시를 이용해 생성

⇒ 네임스페이스와 네임을 해시하여 공간 내에서 해당 이름에 고유한 값을 만든다. 동일한 네임스페이스와 네임으로 다른 UUID를 생성하면 동일한 출력이 생성된다

---

버전 4: 랜덤 생성

⇒ 최신 시스템은 호스트의 난수 또는 의사 난수 소스를 사용하여 값을 출력하기 때문에 많이 쓰인다. 동일한 UUID를 생성할 확률은 거의 없다(있긴 있지만 무시할 정도의 확률)

---

버전 5: SHA-1(이름 기반) 해시를 이용해 생성

⇒ 버전 3과 유사하지만, 더 강력한 SHA-1 알고리즘을 사용하여 입력된 네임스페이스와 이름을 해시한다

---

✨ 자바스크립트 UUID v4 생성 코드

//2015
function getUUID() { // UUID v4 generator in JavaScript (RFC4122 compliant)
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 3 | 8);
    return v.toString(16);
  });
}

//ES6 등장 이후
function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

console.log(uuidv4());

정리

UUID는 고유한 id를 만들기 위한 표준 규약이다. 버전은 5가지가 존재하는데, 이 중 가장 많이 쓰이는 것은 타임스탬프를 기준으로 생성되는 버전 1과 랜덤 생성되는 버전 4이다. 고유성을 완벽하게 보장할 수는 없지만 실제 사용하는데 있어 중복될 가능성이 거의 없기 때문에 많이 사용되고 있다

---

• 참고

nanoid: uuid보다 빠르다는 장점을 가졌다

사용법(리액트)

import React, { useState } from 'react';
import { nanoid } from 'nanoid';

export default function List() {
  const [list, setList] = useState([ {num:1}, {num:2}, {num:3}, {num:4} ]);
  const [count, setCount] = useState(5)
 
  const onClick = () => {
    setCount(count + 1)
    setList((prev) => [...prev, { num: count }]);
  };

  return (
    <>
      <button onClick={onClick}>Add</button>
      {list.map((number, i) => {
        return (
          <div key={nanoid()}> 👈
            <span>{number.num}</span>
          </div>
        );
      })}
    </>
  );
}