React key 중복 오류 발생

■  타임어택을 진행하면서 콘솔창에서 발생했던 키값 중복 오류

Warning: Encountered two children with the same key, `16`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

내용을 읽어보니 키가 중복되니까 키를 고유한 값으로 유지해라 같은 내용으로 이해했다.

 

일단은 시간이 부족해서 콘솔창 오류는 해결 못하고 제출했었는데, 이후에 왜 오류가 났는지 천천히 읽어보고 확인해보니까 쉽게 눈에 들어왔다. 

빨리하려하다보니 get을 친 상태에서 냅다 tab 을 누르고 다음코드로 작성했었고 지금보니 id값에 getDate 라고 작성했다 ㅎ..

(의도했던 코드는 getTime)

console.log로 확인해보니 생성되는 객체들이 전부 같은 id 값인 오늘날짜 16을 가지고 있었다.

다시 new Date().getTime()으로 바꿔주니 문제없이 오류가 발생하지 않는다.

 

 

■  React 에서 key가 필요한 이유?

☀︎ Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

☀︎ 리액트는 효율충이라 비효율적인걸 못참기에 효율적으로 렌더링하기 위해서 key를 주라고 경고한다.

    (key를 안주거나 잘못 줬을 때 경고함)

☀︎ key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

☀︎ state에는 반드시 id를 넣어줄 것.(리액트가 알아볼 수 있는 key를 주기 위해!, 대부분의 api에서는 id가 필수적임)

 

 

■  key를 선택하는 가장 좋은 방법

☀︎ 데이터베이스에서 데이터를 가져오는 경우 본질적으로 고유한 데이터의 ID를 key로 사용한다.

☀︎ uuid 나 new Date().getTiime() 같은 내장함수를 사용할 수도있다.

   (key는 반드시 변하지 않고, 예상 가능하며, 유일해야 함)

☀︎ 정적인 요소에 대해서는 Index를 사용해도 되지만 동적으로 index가 변경될 여지가 조금이라도 있다면 index는 지양해야한다!

    -  리스트의 순서에 따라 index가 변경될 수도 있기 때문에 안정적이지 않다.

   (리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용)

 

 

■  map 함수 호출 내부의 JSX 엘리먼트에는 항상 key가 필요!

 map에서 key 사용 시 map 함수 인자로 전달되는 함수 내부에서 key를 컴포넌트 props를 설정하는 것과 같이 작성한다.

 

 

 

🙂 느낀점
리액트에서 유니크한 키값을 줘야 한다는 걸 지난 일주일 동안 몇 번 들었던 것 같다.

그래서 그렇구나 하고 key를 주곤 했지만 왜 꼭 key를 줘야하는지 그 값이 왜 유니크해야하는지 크게 와닿지는 않았다.

그러나 이번에 마주한 오류를 계기로 key의 중요성에 대해 공부하게 되었고 앞으로 코드를 작성할 때도 key를 써야하는 이유를 알고 작성할 수 있을 것 같다.

 

 

 

출처

https://ko.react.dev/learn/rendering-lists#rules-of-keys