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

리액트에서 JSX로 배열을 통해 UI를 그려준다면 요소에 key속성(prop)을 넣어주어야한다.

 

리액트는 key속성을 이용하여 컴포넌트와 돔 요소간의 관계를 생성하는데, 라이브러리는 이러한 관계를 통해 컴포넌트가 재렌더링되어야하는지 판단한다.

 

배열이 static하지 않은 이상 배열의 인덱스값을 key속성으로 지정하는것은 권장되지 않는다. 리액트가 재렌더링 할 요소를 판단함에 있어 혼란이 생길 수 있기 때문.

 

키는 유니크할 필요는 없다. 형제 요소들 사이에서만 유니크하면 된다.

 

글의 제목이 입력되어있는 title배열을 받아와 map으로 뿌려주는 목적을 가진 JSX코드이다

{
        // map()의 두번째 인자는 반복문이 돌 때마다 0부터 1씩 증가함
        title.map(function(title, i) {
          return (
          <div className="list" key={i}>
            <h4 >{ title } <span onClick={() => { addThumbsUp(thumbsUpCount+1) }}>
              👍</span> {thumbsUpCount} </h4>
            <p>2월 17일 발행</p>
          </div>
        );
        })
      }