리액트에서 UUID 사용하기

UUID

UUID는 Universally Unique IDentifier, 범용 고유 식별자의 약자로 고유한 아이디 값을 생성할때 사용할 수 있는 표준이다.

특히 컴포넌트에 고유한 키를 요구하는 리액트로 개발할때 유용하게 사용할 수 있는데 이때 유용하게 사용할 수 있는 모듈을 소개한다.

react-uuid 라는 모듈로 UUID를 생성하는 함수를 제공하는 모듈이다.

사용법

사용법은 매우 간단하다.

npm install react-uuid 혹은 yarn add react-uuid 로 모듈을 설치하고,

그 id 값을 할당해줘야 하는 파일 내에서 임포트 받아 함수를 실행시키면 된다.

import uuid from 'react-uuid'
import dummy from './dummy'

const Mapper = () => {

return (
	{dummy.map(e=>
	<div key={uuid()}>{e}</div>
	)}
)}

지금은 데이터를 맵핑하는 곳에서 사용했지만, 맵핑하는 것 이외에 새로운 데이터를 상태에 추가한다거나 할때도 사용할 수 있고, 개발자가 생각하는 대로 활용할 수 있을 듯 하다.