React에서 태그 배열의 고유 키

이전 예제에서 우리는 다음과 같이 루프를 사용하여 단락을 생성했습니다:

const res = arr.map(function(item) {
	return <p>{item}</p>;
});

이는 작동하지만, 콘솔을 확인하면 오류가 표시됩니다: Warning: Each child in an array or iterator should have a unique "key" prop. 이 경우 React는 루프의 각 태그에 고유 번호를 부여하도록 요구하여, React가 나중에 이러한 태그를 더 쉽게 작업할 수 있도록 합니다.

이 번호는 key 속성을 사용하여 추가됩니다. 이 경우 번호로 배열 내 요소의 인덱스를 사용할 수 있습니다. 우리의 경우 이 번호는 index 변수에 저장되어 있으며, 수정된 코드 줄은 다음과 같습니다:

const res = arr.map(function(item, index) {
	return <p key={index}>{item}</p>;
});

실행해 보겠습니다 - 콘솔의 오류가 사라집니다:

function App() {
	const arr = [1, 2, 3, 4, 5];
	
	const res = arr.map(function(item, index) {
		return <p key={index}>{item}</p>;
	});
	
	return <div>
		{res}
	</div>;
}

다시 한번: 이 key 속성은 React에게 내부적으로 사용되는 의미를 가지며, 이 점에 대해서는 다음 강의에서 더 깊이 이해하게 될 것입니다. 지금은 단지 다음과 같이 알아두세요: 만약 이러한 오류를 보게 되면, 각 태그에 대해 고유한 값을 가진 key 속성을 추가하면 문제가 해결됩니다.

key는 이 루프 내에서만 고유해야 하며, 다른 루프의 key 값은 다른 루프의 값과 일치할 수 있습니다.

앞서 설명한 내용에 따라 이전 문제의 해결책을 수정하세요.