항해 99 - 2022.03.16.WED (Each child in a list should have a unique "key" prop. 에러)

이번 챕터 일정

• 02/26 기획 회의 ✅
• 02/28 알고리즘 스터디 발제 ✅
• 03/01 1차 기획멘토링 ✅
• 03/05 1차 기술 멘토링  ✅
• 03/09 2차 기획 멘토링 ✅
• 03/12 2차 기술 멘토링 ✅
• 03/16 3차 기획 멘토링 ✅
• 03/19 중간 점검
• 04/09 최종 발표회 

오늘 내가 할 일 

• 메인 컴포넌트 분리 ✅
• 로그인 회원가입 쿠키방식으로 변경 작업 ❎
  • 서버에서 헤더에 쿠키값을 담아서 보내주면 로그인 체크 할때마다 클라이언트에선 따로 요청할 필요없이 헤더에 담긴 쿠키값으로 확인해서 로그인 유지하거나 하는 작업 중이였는데 https가 아니면 작업이 자꾸 안되는 문제가 발생
  • 배포후에 다시 실행할 예정
• 방 진입시 서버에 요청해야하는 데이터 작성 ✅
• Each child in a list should have a unique "key" prop. 에러 잡기 ✅ 

해야 할 일에 대한 정리가 필요한 시간인 거 같다. 
아직 안된부분이 생각보다 너무 많음,,
자잘 자잘하게 생각해야 할 부분들이 너무너무 많다아아

 

<3차 기획멘토링>

• 살짝 아쉬운 점은 주제가 좀 뾰족하지 못하다는 점 
• 기능이 살짝 작은 감이 있으니 좀더 추가가능하다면 추가 해볼 것

 

 

1. Each child in a list should have a unique "key" prop. 에러잡기 

 

문제 발쉥

• 원래 알던 지식으로는 map으로 돌릴 때 키값을 줘야 한다는 건 알고 있어서 값을 줬는데도 자꾸 
• 콘솔에 Each child in a list should have a unique "key" prop. 이오 류가 계속 떠있었다. 

hotRoom.map((data, index) => {
  return (
   <div key={index}>
      <HotRoomCard {...data} />
   </div>
  );
})

해결 방안

• 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다 (알고 있는 지식)
• 자바스크립트의 배열은 정적이지 않다. 즉, 배열의 길이나 원소 등이 변할 수 있다는 의미이다. 따라서 배열의 index를 key prop으로 사용하는 것을 지양해야 한다.
• 배열의 원소의 순서가 바뀌면 index도 바뀌고 컴포넌트마다 고유해야 하는 key값도 같이 바뀌기 때문이다.
• 이렇게 되면 리액트는 리 렌더링 해야 하는 컴포넌트를 헷갈려 잘못된 컴포넌트를 리 렌더링 할 수 있다.
• key가 전역적으로 고유할 필요는 없다. 형제 요소에서 고유해야 한다.

hotRoom.map((data, index) => {
  return (
   <div key="{data.id}">
      <HotRoomCard {...data} />
   </div>
  );
})