[React] shortid를 사용해 랜덤한 key값 만들기

[React] shortid를 사용해 랜덤한 key값 만들기

---

안녕하세요. 이번 포스팅에서는 shortid 라이브러리를 사용해 랜덤한 key값을 만드는 방법에 대해 알아보겠습니다.

 

React에서는 배열을 순환하며 중복된 컴포넌트를 만들때, 필수적으로 고유의 키값을 입력해주어야 합니다.

 

하지만 매번 고유한 키값을 만들기란 쉽지 않죠..  그렇다면 ! 

 

 

Q .인덱스를 키값으로 사용하면 되지 않나요 ?  

 

리액트 공식문서에서는, 항목의 순서가 바뀔 수 있는 경우 Key값으로 인덱스를 사용하지 않는 것을 권장하고 있습니다.

이에 대한 자세한 내용을 확인하고 싶으시다면, 공식문서를 참고해주세요 ! 

 

Q. 그렇다면 고유한 키 값을 만들기 위해서는 어떻게 해야 할까요 ?

 

백엔드 서버에서 데이터를 넘겨 받을 경우에는, 데이터의 _id값을 키값으로 사용하는게 일반적입니다.

하지만, 벡엔드 서버가 아직 완성되지 않았거나, 데이터의 _id값을 받지 못할 경우에는 직접 고유한 키값을 만들어서 사용 할 수 밖에 없는데요,

이떄 'shortid' 라이브러리를 사용하면 쉽게 고유한 key값을 만들 수 있습니다.

자세한 사용 방법은 아래 예시코드와 함께 살펴보겠습니다.

 

 

> shortid 설치

npm i shorid

 

> shorid 생성

import shortid from 'shortid'

console.log(shortid.generate());  // iycxrc8Pu