[React] #10 리액트 : Key

🔥 Warning: Each child in a list should have a unique "key" prop. 🔥

 

익숙한 워닝이다 ,,,!

리액트에서 map을 사용해서 엘리먼트를 하나씩 만들어낼 때

키 값을 주지 않으면 항상 보게 되는 문구이다.

리액트에서 key는 도대체 왜 중요한 것일까?

 

---

Key ( index ❌ )

 

리액트에서 key는 꽤 중요한 듯 보인다.

경우에 따라 키를 줬을 때와 안 줬을 때의 리렌더링에는 큰 차이가 있다.

 

배열이니까 key를 편하게 index로 주면 안 되나?

어차피 자기들끼리 다르면 유니크한 것 아닌가라고 생각했다 ㅎㅎㅎ

결론은 아니다! 그렇게 사용하면 안 된다.

 

예를 들어 아래와 같이

카드가 다른 순서로 섞인 배열의 패가 있다고 했을 때,

이것을 1초마다 카드를 섞듯이 패 배열을 바꿔준다고 가정한 코드를 작성해보자.

(이때 키를 한 번은 id 값으로, 다른 한 번은 index 값으로 줄 예정이다.)

 

const oneCard = [
  [
    { id: "1", value: "spaede" },
    { id: "2", value: "diamond" },
    { id: "3", value: "heart" },
    { id: "4", value: "clobs" }
  ],
  [
    { id: "4", value: "clobs" },
    { id: "1", value: "spaede" },
    { id: "2", value: "diamond" },
    { id: "3", value: "heart" }
  ],
  [
    { id: "3", value: "heart" },
    { id: "1", value: "spaede" },
    { id: "2", value: "diamond" },
    { id: "4", value: "clobs" }
  ],
  [
    { id: "2", value: "diamond" },
    { id: "1", value: "spaede" },
    { id: "3", value: "heart" },
    { id: "4", value: "clobs️" }
  ]
];

 

인덱스를 키 값으로?

인덱스를 키 값으로 주면 렌더링이 어떻게 될까?

아래 코드를 실행한 뒤 tab 키로 포커스를 잡아보면

 

const App = () => {
  //가장 첫번째 배열로 set한 뒤
  const [cards, setCards] = React.useState(oneCard[0]);
  
  //1초마다 카드를 섞는다.
  React.useEffect(() => {
    const interval = setInterval(() => {
      const random = Math.floor(Math.random() * 3);
      setCards(oneCard[random]);
    }, 1000);
    
    return () => {
      clearInterval(interval);
    };
  }, []);
  
  return (
    <>
      {cards.map((card, index) => (
        <div key={index}>
          <button>
            {card.value}
          </button>
        </div>
      ))}
    </>
  );

 

 

포커스는 이동하지 않지만 버튼에 적힌 카드명만 변한다.

키를 안 준 것과 다를 게 없다. 

왜일까? 생각 보면 인덱스의 상태는 변하지 않는다.

 

+)

리액트에서는 리스트 항목에 명시적으로 key를 지정하지 않으면 기본적으로 index를 key로 사용

 

 

 

하지만 내가 원하는 건 섞인 패를 따라가는 것..!

 

리액트는 리랜더링 과정에서 변하지 않은 키 == 인덱스를 보고

동일한 상태라고 판단하고 변경하지 않은 채 버튼의 이름만 업데이트하게 된다.

 

그렇기 때문에 전체를 옮기듯이!
컴포넌트 자체의 위치를 바꾸며 재사용하기 위해서는 unique key를 줘야 한다.

key에 id 값을 넣어주면 해당 카드를 따라가며 포커스가 잘 유지되는 것을 확인할 수 있다!

 

const App = () => {
  //가장 첫번째 배열로 set한 뒤
  const [cards, setCards] = React.useState(oneCard[0]);
  
  //1초마다 카드를 섞는다.
  React.useEffect(() => {
    const interval = setInterval(() => {
      const random = Math.floor(Math.random() * 3);
      setCards(oneCard[random]);
    }, 1000);
    
    return () => {
      clearInterval(interval);
    };
  }, []);
  
  return (
    <>
      {cards.map((card) => (
        <div key={card.id}>
          <button>
            {card.value}
          </button>
        </div>
      ))}
    </>
  );

 

 

리액트에서 key는

리액트가 어떤 항목을 변경, 추가 또는 삭제할 경우 식별하는 것을 도와준다!

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

공식 문서에서도 인덱스는 최최최최후의 수단으로 사용하라고 명시해두었다.

 

특히나 !!!!

항목의 순서가 바뀔 수 있는 경우에는 key에 인덱스를 사용하는 것을 권장하지 않으며,

성능 저하나 컴포넌트의 state와 관련된 문제가 발생할 수 있다!!

 

 

---

 

리스트와 Key – React

Index as a key is an anti-pattern

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***