[React] unique한 key 값을 생성해주는 uuid 라이브러리

리액트로 개발을 하다 보면 늘 만나는 key 에러 ,,,

요번에 만난 에러는 TodoList를 만들던 중 key값이 unique하지 않다는 내용이였다.

 

 

예전에 정리해둔 글 (아래 링크 참고) 을 참고하려 했지만, 고유의 id값을 사용할 수 없었고, 투두리스트 같은 경우 재렌더링 되더라도 데이터가 유지 되어야하는데 이 경우 재렌더링 되면 다시 id값이 처음부터 시작되는 (...) 현상 때문에 다른방법이 필요했다. 

 

 https://mandelina-code.tistory.com/102

[React] 리액트 키에러 | Warning: Each child in a list should have a unique "key" prop 에러

 

여기서 찾은 라이브러리 UUID!

 

 

 

UUID란 ?

universally unique identifier의 약자로, 개체들을 식별하고 구별하기 위한 고유의 이름을 짓도록 해주는 방법이며 국제기구에서 표준으로 정하고 있다. (네트워크 상에서 고유성이 보장되는 id를 만들기 위한 표준 규약.)

 

 

 

1. 설치

 

npm install uuid

 

2. 상단에 import 해주기 

 

import { v4 as uuidv4 } from "uuid";

 

3. 필요한 부분에 사용하기

 

  // 할 일을 추가하는 코드
  const addTask = (): void => {
    let newTask = {
      id: uuidv4(),  // 😀 id값을 uuid로 지정
      taskName: task,
      checked: false,
      revise: false,
    };
	.
    .
    .
}

 

 

4. 확인

나는 각 투두리스트에 고유에 key값을 달아주었는데 보다싶이 key값이 string으로 잘 들어가있는것을 볼 수 있다.

 

uuid의 버전은 1,3,4,5가 있고 이중 많이 사용되는것은 1과 4이다.

1은 타임스탬프 기준, 4는 랜덤으로 생성되며 , 3은 MD5 , 5는 SHA-1 해쉬를 이용해 생성하는 방식이다. 

 

추가적으로 , UUIDv4를 사용했을때 중복 될 가능성은 아예 없는건 아니라고 한다.

하지만 중복될 가능성이 매우 희박해서 걱정없이 사용해도 된다고 한다.

 

 

 

 

 

참고자료

https://stackoverflow.com/questions/1155008/how-unique-is-uuid

https://ko.wikipedia.org/wiki/%EB%B2%94%EC%9A%A9_%EA%B3%A0%EC%9C%A0_%EC%8B%9D%EB%B3%84%EC%9E%90