[Trouble Shooting] UUID를 사용한 고유한 키 값 사용

문제정의

- 프로젝트에서 상품 정보를 수정했을 때, 수정(작성)페이지에서 선택된 지역을 설정하는 기능을 수정하고 있었고 개발자 도구에서 전혀 예상하지 못한 경고를 발견했다.

- 애플리케이션은 정상적으로 동작하고 있었기 때문에, 개발자 도구에서의 경고는 당황스러웠고 찾아보니, 동일한 키를 가진 요소가 있다는 의미였다.

- 리액트에서 map과 같이 반복문을 사용할 때는 고유한 key 값을 사용해야하는 것은 알고 있었고, 이를 코드에 적용했었는데 어느 부분에서 발생한 에러인지 확인해보니 DB에서 받아온 상품의 이미지를 map을 통해 렌더링을 하고 있는 부분이었다.

- 먼저 상품의 이미지를 렌더링하는 코드는 위와 같다. images 배열을 map으로 통해 렌더링하면서 각 요소들의 key 값으로는 image의 name 속성을 전달하고 있었다.

- 나는 images 배열 요소들을 확인했고, file 속성의 값은 동일하게 빈 값인 것을 확인했다. 즉, 동일한 값을 key에 전달하고 있었기 때문에 발생한 경고였다.

시도한 방법 및 해결방안

1. images 배열 요소들의 속성 중 고유한 값 사용

- images 배열 요소들의 속성 중 고유한 값을 사용하는 방법을 생각했다.

- 위의 이미지에서 두 개의 요소가 각각 다른 fileString을 가지고 있는 것을 확인했고, key에 image.fileString을 전달하는 방법을 생각했다.

 

2. UUID 사용

- 하지만, 만약 두 개의 요소의 모든 속성 값이 동일한 상태라면 고유한 값을 어떻게 정의해야할까를 고민했다.

- 보통 Date.now()를 사용하는 경우도 있지만, 동시에 여러개의 여러개의 컴포넌트를 한번에 return하다보니 key값이 중복되는 상황이 발생할 수도 있다는 글을 읽었고 확실하게 고유한 값을 생성하는 방법을 알고 싶었다.

- 그러던 중 랜덤으로 생성된 문자열이 만들어주는 uuid 라이브러리를 알게 되었고, 프로젝트에 적용해보고자 했다.

- uuid의 사용법은 다음과 같다.

- 첫 번째, npm install uuid 명령어로 uuid 라이브러리를 설치한다.

- 두 번째, uuid의 함수를 통해 고유한 값을 생성하면 된다.(버전 마다 값 생성하는 방법이 다르다. v4일 경우 랜덤 난수를 생성하는 방식으로 일반적으로 쓰이는 버전으로 난 v4 를 사용했다.)

- 위와 같이 uuid를 사용하여 고유한 값을 생성했고 이를 key 값으로 사용했을 때, 개발자 도구의 경고는 사라졌다.

배운 점

- 프로젝트의 실행을 방해하는 에러는 아니었기에 자칫 지나칠수도 있었기 때문에, 개발자 도구에서 항상 문제점을 파악하는 습관을 가져야겠다고 생각했다.

- 또한, 역시 아직 내가 모르는 부분이 많다는 생각이 들었고 더 열심히 해야겠다는 원동력이 되는 것 같다.

---

참고 : https://velog.io/@jiheon788/React%EC%97%90%EC%84%9C-Key%EC%9D%98-%EC%97%AD%ED%95%A0-UUID%EC%9D%98-%EC%82%AC%EC%9A%A9

https://zivvle.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B3%A0%EC%9C%A0%ED%95%9C-Key-%EA%B0%92-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0-uuid