[React.js] uuid, nanoid 라이브러리 사용하기 (key)

uuid, nanoid 라이브러리 사용하기 (key)

들어가며

• 다음과 같이 @map@을 이용하여 요소를 하나하나씩 표현할 경우 @key@ 값을 지정해야 하는데 어떤값을 @key@ 값으로 지정해야할 지 모를 경우가 많다.
• 이때, @uuid@ 또는 @nanoid@ 라이브러리를 이용하면 이 고민을 해결할 수 있다.

import { data } from './data.js';

export default const App = () => {
  return (
      <ul>
          {data.map((item) => <li key={...}>{item.content}</li>}
      </ul>
  )
}

 

 

uuid 라이브러리

개념

• @uuid@는 Universally Unique Identifier 의 약자로, 전 세계에서 고유한 값을 생성할 수 있는 식별자이다.
• @uuid@는 주로 데이터베이스 키, 파일 이름, 트랜잭션 ID 등을 생성할 때 사용된다.
• @uuid@는 여러 버전이 있지만 주로 @v4@가 많이 사용된다.
  • @v4@는 무작위로 UUID를 생성한다.

 

라이브러리 설치

$ npm install uuid    # yarn add uuid

 

사용법

import { v4 as uuidv4 } from 'uuid';

uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

 

 

사용 예제

import { v4 as uuidv4 } from 'uuid';

import { data } from './data.js';

export default const App = () => {
  return (
      <ul>
          {data.map((item) => { 
              const id = uuidv4();   // 고유한 uuid 생성하기
              return (<li key={id}>{item.content}</li>);
          }
      </ul>
  )
}

 

nanoid 라이브러리

개념

• 자바스크립트 환경에서 고유하고 짧은 ID를 생성하기 위한 경량 라이브러리
• 성능과 보안에 중점을 두고 설계되어, 고유한 식별자를 생성하는 데 매우 빠르고 안전하다.
• 보통 @uuid@가 널리 사용되지만, @nanoid@는 더 짧고 효율적인 대안으로 주로 웹 개발에서 식별자(ID)를 생성할 때 사용된다.

 

라이브러리 설치

$ npm install nanoid    # yarn add nanoid

 

사용법

import { nanoid } from 'nanoid'

model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"

 

 

사용 예제

import { nanoid } from 'nanoid';

import { data } from './data.js';

export default const App = () => {
  return (
      <ul>
          {data.map((item) => { 
              const id = nanoid();   // 고유한 id 생성하기
              return (<li key={id}>{item.content}</li>);
          }
      </ul>
  )
}

 

 

참고 사이트

uuid

nanoid