[React] Each child in a list should have a unique key prop.

리액트를 개발하면서 한번쯤은 보셨을 경고 메세지... 라고 한다😥

 

 

 

map 함수에 대한 이해가 부족했을때(솔직히 지금도 부족함ㅎㅎ) 배운걸 적용해보느라 열심히 삽질하고 있었음..

 

🪓  key 값을 주지 않은 Comment.js

import React from 'react';
import './Comment.scss';

class Comment extends React.Component {
  render() {
    const { commentList } = this.props;

    return (
      <>
        <ul className="comment_list">
          {commentList.map(comment => {
            return (
              <li className="comment_box"> // ⭐️ key 값이 없음!!
                <span className="comment_id">{comment.userName}</span>
                <span className="comment_content">{comment.content}</span>
              </li>
            );
          })}
        </ul>
      </>
    );
  }
}

export default Comment;

 

그런데.... npm start를 했더니 갑자기 이런 에러가 떴다. 두둥!

한국말로 번역하자면..

❗️ 경고 : 목록의 각 하위에는 고유 한 "키" 소품이 있어야 합니다.

 

이럴 땐 Javascript에서 배열 값을 하나씩 꺼내어 return 할 때 리액트가 항목을 안정적으로 식별할 수 있도록 속성에 key 값을 추가하여 return 해 주어야 한다!!

 

 

🪓 key 값을 준 후의 Comment.js

import React from 'react';
import './Comment.scss';

class Comment extends React.Component {
  render() {
    const { commentList } = this.props;

    return (
      <>
        <ul className="comment_list">
          {commentList.map(comment => {
            return (
              <li ⭐️key={comment.id} className="comment_box">
                <span className="comment_id">{comment.userName}</span>
                <span className="comment_content">{comment.content}</span>
              </li>
            );
          })}
        </ul>
      </>
    );
  }
}

export default Comment;

Error 메세지가 사라졌다! 호호호

 

 

 

참고 사이트 👉🏻 리스트와 Key