[LAB-3] firebase로 crud 작업중인데, key 값을 unique ID로 줬는데도 unique하지 않다는 에러가 뜹니다.

[eeeyooon]

질문 작성자

강지윤

문제 상황

• 파이어베이스 DB에 저장한 데이터를 한번에 가져와서 화면에 띄우는 작업중입니다.
• 데이터를 가져와 렌더링할때 div에다가 key값을 주고 있는데, 분명 각각의 데이터에 unique한 key값을 줬는데도 unique하지 않다는 에러가 뜨고 있습니다.

작업 진행 상황

1. 파이어베이스 DB (user DB에서 name, userId 가져올 예정)

2. 데이터는 잘가져와서 화면에 렌더링 성공함.

3. 코드 설명

unique ID 처리 코드 (두 가지 방법)

• 방법 1. useId 사용

  const uniqueId = useId();
  console.log("uniqueId: ", uniqueId);

• 방법 2. DB에서 고유 ID 가져오기

let uniqueId = "";

 data.docs.map((doc) => {
         uniqueId = doc.id;
         console.log(uniqueId);
       });

데이터를 가져와서 화면에 렌더링하는 코드

  const showUsers = users.map((value) => (
    <div key={uniqueId}>
      <h1>Name: {value.name}</h1>
      <h1>UserId: {value.userId}</h1>
    </div>
  ));

4. 에러 (콘솔엔 unique ID의 값을 확인한 것임)

uniqueID 처리하는 방법 1의 경우

uniqueID 처리하는 방법 2의 경우

프로젝트 저장소 URL

• https://github.com/eeeyooon/Firebase-Practice/blob/main/src/App.js

환경 정보

• 운영체제 정보 (Windows)
• Node.js 정보 (v18.12.1)
• 라이브러리 정보 (React v18.2.0)

[yamoo9]

@eeeyooon 님. 중복된 ID 값이 사용되었다고 오류라 안내하는 내용은 타당해 보여요.

아래 작성된 코드를 잘 보세요. 순환(map) 내부에 key prop 값으로 uniqueId 값이 사용 되고 있어요. 그런데 uniqueId 값이 고유하지 않은 것이죠.

const showUsers = users.map((value) => (
  <div key={uniqueId}>
    <h1>Name: {value.name}</h1>
    <h1>UserId: {value.userId}</h1>
  </div>
));

중복된 이유는 아래 코드에 있어요. map 내부에서 Console로 출력하면 고유 값으로 나오겠지만, 실상 순환 종료 후 uniqueId 값은 순환 마지막 값일테니까요.

let uniqueId = "";

 data.docs.map((doc) => {
   uniqueId = doc.id;
   console.log(uniqueId);
});

console.log(uniqueId); // 순환 마지막 순서의 doc.id 값

위 코드를 아래와 같이 변경한 후 테스트 해보세요. user 정보 중 userId는 Firestore에서 가져온 Document ID이므로 더 이상 중복 식별자임을 경고하지 않을 것입니다. 😃

const showUsers = users.map(({ userId, name }) => (
  <div key={userId}>
    <h1>Name: {name}</h1>
    <h1>UserId: {userId}</h1>
  </div>
));

[eeeyooon]

답변 감사드립니다. 선생님이 알려주신 코드로 해봤는데 유효하지 않은 값이라고 에러가 떠서 이것 저것 수정하다가 다음과 같이 코드를 바꾸니 원하는 대로 코드 진행이 됐습니다. 왜 알려주신 코드는 에러가 뜨고, 다음 코드는 에러가 뜨지 않는지는 모르겠지만.. 코드를 다시 확인해보겠습니다..! 😥

const showUsers = users.map(({ value }) => (
  <div key={value.id}>
    <h1>Name: {value.name}</h1>
    <h1>UserId: {value.userId}</h1>
  </div>
));

[yamoo9]

답변 감사드립니다. 선생님이 알려주신 코드로 해봤는데 유효하지 않은 값이라고 에러가 떠서 이것 저것 수정하다가 다음과 같이 코드를 바꾸니 원하는 대로 코드 진행이 됐습니다. 왜 알려주신 코드는 에러가 뜨고, 다음 코드는 에러가 뜨지 않는지는 모르겠지만.. 코드를 다시 확인해보겠습니다..! 😥

const showUsers = users.map(({ value }) => (
  <div key={value.id}>
    <h1>Name: {value.name}</h1>
    <h1>UserId: {value.userId}</h1>
  </div>
));

추가 답변

질문 글에 아래처럼 작성 하신 걸 토대로 답변 드렸어요. (실제 내려 받아 구동한 건 아니랍니다)

그런데 답변 달아주신 코드를 보니 value가 아니라, { value }로 구조분해 할당된 것을 보아 아마도 user 값의 value에 id, name, userId가 포함된 것일 겁니다. (알려준 코드가 문제인 이유)

const showUsers = users.map(({ value }) => (
  <div key={value.id}>
    <h1>Name: {value.name}</h1>
    <h1>UserId: {value.userId}</h1>
  </div>
));

질문

그런데 말입니다. (그것이 알고싶다 진행자 톤) user.value 안에 id, userId 2개의 서로 다른 용도의 고유한 식별자 값을 가지나요? 이유가 궁금합니다. 🤔

[eeeyooon]

user.value에서 userId는 사이트에 회원가입한 id, id는 각각의 회원을 식별하는 고유의 값으로 생각해서 구별했습니다. 보통 사이트에선 userId의 변경이 있지 않으니, userId를 그대로 고유한 식별값으로 사용해도 되지만 현재는 테스트 중이라 CRUD 중 update 테스트 땐 userId를 업데이트하려고 별도로 절대 변경이 되지 않는 값인 id를 만들었던 것입니다! 이름이 비슷해서 설명이 어려워지는데 혹시 충분히 설명이 되었을까요?

[yamoo9]

user.value에서 userId는 사이트에 회원가입한 id, id는 각각의 회원을 식별하는 고유의 값으로 생각해서 구별했습니다. 보통 사이트에선 userId의 변경이 있지 않으니, userId를 그대로 고유한 식별값으로 사용해도 되지만 현재는 테스트 중이라 CRUD 중 update 테스트 땐 userId를 업데이트하려고 별도로 절대 변경이 되지 않는 값인 id를 만들었던 것입니다! 이름이 비슷해서 설명이 어려워지는데 혹시 충분히 설명이 되었을까요?

회원가입 할 때 생성되는 고유 식별자(uid: 중복인 경우 가입되지 않음)가 있음에도 별도의 사용자 ID를 사용하고, 심지어 사용자 ID를 수정할 수 있어야 한다는 말에 선뜻 이해가 잘 되지는 않네요. 🤔

그럼에도 여러분이 고민해 구성한 것일테니 추후 구현된 인터페이스를 통해 이해해보겠습니다. 😊

[eeeyooon]

어엇 제 설명이 부족했던 것 같은데 이건 테스트용 DB라서 프로젝트랑 전혀 상관없는 데이터로 작업 중이었습니다!!!! 어차피 테스트용 데이터라서 말도 안되는 데이터 모델링을 한 거라, 데이터에 관해서는 아주 가볍게 생각해주셔도 됩니다 😅 실제 프로젝트에선 저렇게 엉터리로 데이터를 짜고 있진 않으니 너무 걱정하실 필요 없습니다. ㅎㅎ