컴포넌트 반복 & key

:D ·2021년 12월 2일
1

React 📚

목록 보기
6/8
post-thumbnail

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다.

이런 예제가 있다.

import React from "react";

const IterationSample = () => {
  return (
    <ul>
      <li></li>
      <li>여름</li>
      <li>가을</li>
      <li>겨울</li>
    </ul>
  );
};

export default IterationSample;

위에 코드에서 <li></li> 가 반복되는 것을 알 수 있습니다. 지금은 li태그 하나 뿐이라 그렇게 문제가 되지는 않습니다. 하지만 코드가 좀 더 복잡하다면 코드양은 더더욱 늘어날 것이고, 파일 용량도 쓸데없이 증가할 것입다. 이는 낭비이고, 보여 주어야 할 데이터가 유동적이라면 그런 코드로는 절대 관리하지 못합니다.

그러면 어떻게 해야할까? → map()을 사용하자.

import React from "react";

const IterationSample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"];
  const nameList = names.map((name) => <li>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

그러나, key가 없다는 에러가 뜬다.

key는 무엇일까?

key는 리스트를 만들때 포함해야하는 속성값이며, 리스트를 렌더링 할때 어떤것에 변경이 있었는지 알아내려고 사용합니다.

왜 Key가 필요할까?

key가 없을 때는 virtual dom이 비교하는 과정에서 리스트를 순차적으로 비교하면서 감지합니다. 하지만 key가 있으면 어떤 변화가 일어났는지 빠르게 알아낼수 있습니다.

<ul>
  <li>first</li>
  <li>second</li>
</ul>
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

리액트는 이전 리스트와 현재 리스트를 순회하고 차이점을 발견하면 변경합니다.

이 예시에서는 맨끝에 추가를 했기 때문에 , 1번째 2번째는 같아서 그냥 냅두고, 3번째에 추가할것 입니다.

그러나 이 예시를 살펴봅시다

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>
<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

이런식으로 맨앞에 리스트가 추가가 되면, 모두 다르다고 판단하여 모든 요소를 변경합니다. 이러한 문제를 해결하기 위해 key가 만들어 졌습니다.

<ul>
  <li key="2015">Hello</li>
  <li key="2016">Rect</li>
</ul>

<ul>
  <li key="2014">Bye</li>
  <li key="2015">Hello</li>
  <li key="2016">React</li>
</ul>

이렇게 key를 가지고 있어서 앞에 요소가 추가가 되더라도, 2015,2016 키를 가진 데이터는 이동만 하면되고, 2014키를 가진 데이터만 추가가 됩니다.

그러면 Key값은 어떤값으로 설정할까?

key값은 데이터가 가진 고유값으로 설정해야합니다. 고유한 값(id)가 없다면 index를 사용할수 있습니다.

그러나 index를 key으로 설정하는것은 권장하지 않는 방법입니다. 그 이유는 무엇일까요?

컴포넌트는 key 를 보고 갱신되고 재사용됩니다. index를 사용했다면 항목의 순서가 바뀌었을 경우 key 또한 바뀌었을 거고 이는 state를 엉망으로 만들거나 원하지 않는 방식으로 컴포넌트를 바꿀 수 있습니다.

예외사항

문제는 배열의 순서가 바뀌어 key 가 바뀌었을 경우 일어나게 됩니다. 따라서 아래와 같은 경우는 index 를 key 값으로 사용해도 문제가 발생할 확률이 낮습니다.

  1. 배열과 배열의 항목들이 static 하여 변경되지 않는 경우
  2. 배열의 항목들이 id 값이 없는 경우
  3. 배열이 절대 재배열되거나 일부가 삭제되지 않는 경우
profile
강지영입니...🐿️

0개의 댓글