리액트에서 반복되는 컴포넌트를 만들 때 꼭 고유한 Key 값을 부여해야만 합니다. 물론 단순하게 index 값을 key로 간단하겠지만, 그럴 경우 key값이 중복 확률이 높기 때문에 좋은 방법은 아닙니다. 그렇다고 매번 수동으로 유니크한 key를 지정하는 것은 번거로운 일입니다.
따라서 uuid 라이브러리를 이용해서 고유한 키 값을 간편하게 생성해보겠습니다.
UUID란?
uuid란 Universal Unique Identifier(범용 단일 식별자)의 약자입니다. uuid 함수를 호출하면 다음과 같이 랜덤으로 생성된 문자열이 만들어집니다. 이걸 컴포넌트의 key 값으로 사용하면 고유한 key 값을 부여할 수 있습니다.
uuid()
// e9ee74a7-cf11-4fac-8b77-61b51c7d636bUUID 라이브러리 설치하기
npm으로 설치합니다.
npm install uuidUUID 사용하기
uuid 라이브러리 RFC4122의 버전 1, 3, 4, 5를 지원합니다. 버전 마다 값 생성하는 방법이 다릅니다. v4일 경우 랜덤 난수를 생성하는 방식으로 일반적으로 쓰이는 버전입니다.
(참고로, v4는 랜덤 문자열을 생성하기 때문에 사실 완벽하게 고유성을 보장한다고 볼 수는 없습니다. 하지만 수학적으로 계산했을 때 똑같은 중복 값이 나올 확률이 매우(!!) 적기 때문에, 실제 사용시에는 uuid 값을 그냥 고유값으로 취급해서 사용합니다.)
리액트에서 사용하기
리액트에서 아래와 같이 모듈 방식으로 불러와서 쓰면 됩니다.
import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'일반 자바스크립트에서 사용하기
일반 자바스크립트 문법으로 사용할 때는 아래와 같이 require로 불러와서 사용합니다.
const { v4: uuidv4 } = require('uuid');
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'컴포넌트의 Key 값으로 사용하기
다음과 같이 uuidv4()로 리액트 컴포넌트의 키 값을 생성해서 쓸 수 있습니다.
<span key={uuidv4()}>value</span>그외에도 고유값이 필요할 때 역시 uuidv4() 함수로 랜덤하게 생성해서 쓰면 매번 고유한 id 값을 구할 필요가 없어서 편리합니다.