> 개요

요즘 약간 리팩토링하는 재미가 붙었달까? 몇개월 전이나 지금이나 티나게 달라졌다는 느낌은 없었는데, 리팩토링을 하면서 조금 내가 성장하고 있구나 라는걸 느끼고 있다. 그 이유는, 내 코드를 보면서 어떻게 이렇게 했지? 라는 부분도 몇번 느꼈고, 효율성과 가독성을 전혀 고려하지 않는 컴포넌트 분리.. 등등

그래서 리팩토링 리팩토링 하나보다~

> 문제

쩃든~ 오늘 만난 에러는 key 값 에러입니다!!!!!!!

오늘 작업한 것중 하나는 상수데이터를 수정해주었는데, map 메소드를 활용해서 하는 도중, 자주 발견할 수 있는 error를 확인할 수 있었다. 바로 unique 에러... 아 당연히 난 이거 어떻게 해결하는지 알쥐!

그래서 했지~ 근데 안돼~~ ㅜㅜ 좀 당황했다... 어라? 이게 맞을텐데 하면서 ㅋㅋ

문제는 동일한 key값을 줘도 에러가 발생한다는 것이다.

Warning: Each child in an array or iterator should have a unique “key” prop.

이런 식으로 빨간 문구가 나오면서, 결론적으로는 해결은 했다. 그러던 중 새로운 발견을 햇다~!!

> 해결

해결 방법으로는 "uuid" 를 활용한는 것이다.
"uuid" 는 Universally Unique Identifier, 범용 고유 식별자의 약자로 고유한 아이디 값을 생성할 때 사용할 수 있는 표준이다.

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

사용법

npm install react-uuid 혹은 yarn install react-uuid 로 설치를 하고,

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

const Mapping = () => {
	return(
      {dummy.map(el => 
      <div key={uuid()}>{el}</div>
      )}
    )}

이런식으로 활용이 가능하다. 지금은 단순히 mapping 하는것에만 사용했지만, 다른 방법으로도 많이 활용이 가능해보인다. 사용자에게 특정한 아이디를 부여한다던지 등등.