[React] 에러 해결: "Warning: Each child in a list should have a unique "key" prop."

❗️에러 상황

반복문을 통해 <div> 태그 안에 특정 값을 리스트에 넣는 작업을 수행하는 중에 에러를 마주하였습니다.

let heyTechList = [];
for (i = 1; i <= 10; i++){
      heyTechList.push(
            <div>{i}</div>
      )
};

📝 에러 메시지

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

에러 메시지

💡 원인 및 해결책

리액트는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성하고 불필요한 리렌더링을 방지하기 때문에, 자식 컴포넌트마다 고유의 key 값을 입력해 줘야 합니다. HTML 태그 종류와 상관없이, 반복문을 사용한다면 iteration 값이 매번 고유 값이므로 아래와 같이 활용할 수 있습니다. 

<div key = {i}>{i}</div>

이처럼 자식 컴포넌트마다 고유의 key 값을 부여하면 쉽게 문제를 해결하실 수 있습니다.

---

포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요.

그럼 오늘도 즐거운 하루 보내시길 바랍니다 :)

고맙습니다😊