배열 렌더링 (key값이 필수인 이유)

배열 렌더링

 

리액트에서 배열을 렌더링할 때에 굳이 하나하나 렌더링하지 않고 map을 통하여 한번에 렌더링할 수 있다. 하지만 비교를 위해 먼저 하나하나 렌더링 해보자.

import React from 'react'

function User({user}) {
	return (
		<p>
			<div id={user.id}>
				{user.name}
			</div>
		</p>
	)
}

function Test() {
	const arr = [
		{
			id: 1,
			name: 'mijeong',
		},
		{
			id: 2,
			name: 'hyeonkim',
		},
		{
			id: 3,
			name: 'kilee',
		}
	]

	return (
		<div>
			<User user={arr[0]} />
			<User user={arr[1]} />
			<User user={arr[2]} />
		</div>
	)
}

export default Test

 

 

하나하나 렌더링하는 것에 대한 불편함을 느껴 보았으니 map을 사용하여 렌더링해보자. map은 배열의 요소를 바꾸고 새롭게 복사한 배열을 사용할 수 있다. 그리고 콜백함수를 주고 콜백함수로 각 배열을 관리할 수 있다. map에 대한 자세한 내용은 mdn Map을 참조하자.

Test()의 return만 조금 수정해주면 배열의 각 요소를 렌더링할 수 있다.

return (
		<div>
			{arr.map(n => {
				return <User user={n} key={n.id} />
			})}
		</div>
	)

 이 전 코드의 Test()의 return만 수정했다. 여기서 주의해야할 점은 key를 추가해줬다는 점이다. map을 사용할 때에 key를 넣어주지 않으면 경고가 뜬다. 배열을 렌더링 할 때에 key element를 설정하지 않으면 배열이 업데이트될 때에 비효율적으로 렌더링 될 수 있기 때문이다.

 

key element가 없는 상태에서 배열의 한 요소의 삭제가 일어날 경우를 먼저 생각해보자. 한 요소의 삭제가 일어나면 간단하게 그 요소가 삭제되고 끝이 아니다. 삭제된 요소의 자리에 다음 요소의 값이 들어간다. 다음 요소의 자리에는 그 다음 자리의 값이, 이렇게 끝까지 반복하며 마지막 자리를 없앤다.

삽입은 삽입할 요소의 자리에 삽입할 값이 들어간다. 원래 있던 값을 다음 요소의 자리에, 다음 요소의 값은 그 다음 요소의 자리로 끝까지 반복하며 마지막에 요소를 하나 추가해준다.

 key element를 추가해주면 이런 행동을 하지 않아도 되기 때문에 key element를 넣어줘야 하는 것이다.

실제로 key element를 임의로 넣지 않으면 임의로 들어간다고 한다. 정확한 내용은 velopert의 글을 참조하자.

 

끝으로

velopert의 글을 보고 공부하며 중요하다고 생각한 부분에 대해서 간략하게 정리한 글이기 때문에 이 예시를 따라가더라도 코드가 정상동작할지 않을 수 있다.(정상동작 안할것이다.) 혹시나 실제로 이 코드를 동작시켜 보고 싶은데 동작하지 않으면 댓글이나 연락을 주면 최대한 도와줄 생각이다.