[ Habit Treat Project ] Component error / key

holang-i·2021년 6월 4일
0

JavaScript/React/Redux

목록 보기
9/10
post-thumbnail

부모 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를 가지고 있는 아이템이 있으면 절대 안 된다.








profile
🌿 주니어 프론트엔드 개발자입니다! 부족하거나 잘못된 정보가 있다면 알려주세요:)

0개의 댓글