React 고유 Key값 생성
- 리액트에서 반복되는 컴포넌트를 만들 때 꼭 고유한 Key 값을 부여해야 한다.
- 단순하게 index 값을 key로 하면 간단하겠지만, 그럴 경우 key값이 중복 확률이 높기 때문에 좋은 방법이 아니다.
- 그렇다고 매번 수동으로 유니크한 key를 지정하는 것은 번거롭기 때문에 uuid 라이브러리를 이용해서 고유한 키 값을 간편하게 생성할수 있다.
UUID란?
- uuid란 Universal Unique Identifier(범용 단일 식별자)의 약자다.
- uuid 함수를 호출하면 다음과 같이 랜덤으로 생성된 문자열이 만들어진다.
- 이걸 컴포넌트의 key 값으로 사용하면 고유한 key 값을 부여할 수 있다.
uuid()
UUID 라이브러리 설치하기
npm install uuid
UUID 사용법
-
uuid 라이브러리 RFC4122의 버전 1, 3, 4, 5를 지원한다.
-
버전 마다 값 생성하는 방법이 다르다.
-
v4일 경우 랜덤 난수를 생성하는 방식으로 일반적으로 쓰이는 버전이다.
- 참고로, v4는 랜덤 문자열을 생성하기 때문에 사실 완벽하게 고유성을 보장한다고 볼 수는 없다.
- 하지만 수학적으로 계산했을 때 똑같은 중복 값이 나올 확률이 매우(!!) 적기 때문에, 실제 사용시에는 uuid 값을 그냥 고유값으로 취급해서 사용한다.)
React에서 UUID사용하기
<React 예시>
import { v4 as uuidv4 } from 'uuid';
uuidv4();
위의 예시와 같이 모듈 방식으로 불러와서 사용한다.
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 값을 구할 필요가 없어 편리하다.