React UUID

React 고유 Key값 생성

• 리액트에서 반복되는 컴포넌트를 만들 때 꼭 고유한 Key 값을 부여해야 한다.
• 단순하게 index 값을 key로 하면 간단하겠지만, 그럴 경우 key값이 중복 확률이 높기 때문에 좋은 방법이 아니다.
• 그렇다고 매번 수동으로 유니크한 key를 지정하는 것은 번거롭기 때문에 uuid 라이브러리를 이용해서 고유한 키 값을 간편하게 생성할수 있다.

UUID란?

• uuid란 Universal Unique Identifier(범용 단일 식별자)의 약자다.
• uuid 함수를 호출하면 다음과 같이 랜덤으로 생성된 문자열이 만들어진다.
• 이걸 컴포넌트의 key 값으로 사용하면 고유한 key 값을 부여할 수 있다.

uuid() 
// e9ee74a7-cf11-4fac-8b77-61b51c7d636b

UUID 라이브러리 설치하기

npm install uuid

UUID 사용법

• uuid 라이브러리 RFC4122의 버전 1, 3, 4, 5를 지원한다.

• 버전 마다 값 생성하는 방법이 다르다.

• v4일 경우 랜덤 난수를 생성하는 방식으로 일반적으로 쓰이는 버전이다.

  • 참고로, v4는 랜덤 문자열을 생성하기 때문에 사실 완벽하게 고유성을 보장한다고 볼 수는 없다.
  • 하지만 수학적으로 계산했을 때 똑같은 중복 값이 나올 확률이 매우(!!) 적기 때문에, 실제 사용시에는 uuid 값을 그냥 고유값으로 취급해서 사용한다.)

React에서 UUID사용하기

<React 예시>

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

위의 예시와 같이 모듈 방식으로 불러와서 사용한다.

JS에서 UUID사용하기

<JS 예시>

const { v4: uuidv4 } = require('uuid');
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

위의 예시와 같이 require로 불러와서 사용GKS다.

컴포넌트의 Key 값으로 사용하기

<예시>

 <span key={uuidv4()}>value</span>

• 위의 예시와 같이 uuidv4()로 리액트 컴포넌트의 키 값을 생성해서 쓸 수 있다.
• 그외에도 고유값이 필요할 때 역시 uuidv4() 함수로 랜덤하게 생성해서 쓰면 매번 고유한 id 값을 구할 필요가 없어 편리하다.