React - 리스트와 key

React에서는 다양한 컴포넌트를 제작하여 사용합니다.

그중 댓글이나 게시글 같은 컴포넌트는 하나의 페이지 내에서 반복적으로 사용하는 경우가 있습니다.
그럴때 직접 컴포넌트를 하나하나 입력해 렌더링하는 방법도 있지만, map() 함수를 통해 여러개의 컴포넌트를 렌더링 하는 방법이 있습니다.

1. map() 동작시켜보기

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2,4,6,8,10]

일반적인 map함수의 동작입니다. 이와같이 배열내의 요소를 반복적으로 동작하게 하는데에 map() 함수를 사용합니다.

이러한 작동 원리를 이용해 반복되는 컴포넌트를 렌더링 하는데에 사용할 수 있습니다.

//state
let [comments, setComments] = useState([]);

//using map()
<div className="user-comments">
	{comments.map((comment, index) => {
    	return <UserComment comment={comment}/>;
	})}
</div>

UserComment 컴포넌트
const UserComment = props => {
  let { comment } = props;
  return (
    <div className="comments">
      <span className="user-name">wecode</span>
      <span className="commnets-desc">{comment}</span>
    </div>
  );
};

위의 코드는 comments state의 배열내의 요소를 props로 넘겨주어 UserComment를 배열의 요소 길이만큼 반복적으로 렌터링 하는 코드입니다.
comments내의 요소가 첫번째 인덱스부터 순차대로 UserComment 컴포넌트의 props로 전달돼 이를 반영한 컴포넌트가 렌더링 됩니다.

하지만 위의 코드가 실행될때
Missing "key" prop for element in iterator
다음과 같은 경고문이 발생할 것입니다.

이 경고문은 각 항복에 key를 넣어야 한다는 뜻이고 "key"는 엘리먼트 리스트를 만들때 포함해야하는 특수한 어트리뷰트 입니다.

2. key는 무엇일까

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는것을 돕는 어트리뷰트 입니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해주어야 합니다.

//state
let [comments, setComments] = useState([]);

//using map()
<div className="user-comments">
	{comments.map((comment, index) => {
    	return <UserComment comment={comment} key={index}/>;
	})}
</div>

위 코드의 경우에는 각 항목의 index를 key로 사용하였습니다.
map함수내의 리스트의 적용을 받는 컴포넌트의 props로 key를 부여해준다면 이전에 발생했던 경고문이 사라진 모습을 확인할 수 있습니다.

• key를 선택하는 가장 좋은 방법은 리스트의 다른 항목과 겹치지 않을수 있는 고유하게 식별할 수 있는 문자열을 사용하는 것입니다.

• 대부분의 경우 데이터가 가진 ID를 key로 사용합니다.

• 렌더링 항목에 대해 안정적인 key를 선택할 수 없을때 위 코드와 같이 항목의 인덱스를 key로 사용할 수 있습니다.

하지만 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다.