부모 Component에서 발생한 오류
😼 key를 제공해줌으로서 문제를 해결!
state에 배열안에 객체들을 담고 있는 값을 map을 이용해서 각각의 li태그들로 자식 컴포넌트를 만드는 과정에서 한 가지 오류가 발생했다.
아래와 같은 오류가 발생하였는데 여기서 에러 문구를 잘 살펴보면,리스트에서는 고유한
key를 사용 해야 된다! 라는 문구가 나온다.
리액트에서는 자식 컴포넌트가 있다면, 고유한 키가있어야 된다.
이 말은 각각의 컴포넌트에 id를 부여함으로써 id가 동일하다면, 자식 컴포넌트가 변경된 것이 아니다.
다른 자식 컴포넌트가 추가되거나 위치가 변화된다 하더라도 불필요한 렌더링을 id를 체크해서 막을 수 있다.
그렇기 때문에 리스트 안에서 쓰이는 자식 컴포넌트에는 id를 부여하는 것이 매우 중요하다.
Key
key가 무엇이고 왜 사용하는지에대해 알아볼 것이다.
key는 React가 어떤 항목을 변경하고 추가, 삭제할 지 식별하는 것을 도와주는 역할을 한다.
key는 Element에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해줘야 된다.
render() { const fruits = [🍓, 🍋, 🍇, 🍉, 🍒, 🍑, 🍈]; return ( <li key={fruits.toString()}> {fruit} </li> )) ); }
Key를 선택하는 가장 좋은 방법에는 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 그래서 대부분 데이터의 ID를 key로 사용한다고 한다.
const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li> );
[ 정리 ]
1. key는 고유한 번호를 사용해야된다.
2. 배열을 이용할 때, 배열의 인덱스를 사용하면 안 된다.
--> 배열의 인덱스를 사용하게되면, 배열의 요소들이 순서가 바뀌게 되면 인덱스도 바뀌기 때문에
키, 값이 동일한 Object임에도 불구하고 key가 달라질 수 있기 때문에 절대 사용하면 안 된다.😼 한 리스트 안에는 동일한 id를 가지고 있는 아이템이 있으면 절대 안 된다.
