배열 렌더링

아래와 같이 배열을 하나하나 렌더링 하는것은 노가다를 해야해서 별로 좋지 않아서

컴포넌트를 재사용 할 수 있도록 새로 만들어 보자!

 

** 한 파일에 여러개의 컴포넌트를 선언해도 괜찮다!

 

---

일단은 노가다 버전

 

UserList.js

import React from 'react';

function usersList() {
	const users = [
		{
			id: 1,
			usersname: 'velopert',
			email: 'public.velopert@example.com'
		},
		{
			id: 2,
			usersname: 'tester',
			email: 'tester@example.com'
		},
		{
			id: 3,
			usersname: 'admin',
			email: 'imAdmin@example.com'
		}
	];

	return (
		<div>
			<div>
				<b>{users[0].usersname}</b> <span>{users[0].email}</span>
			</div>
			<div>
				<b>{users[1].usersname}</b> <span>{users[1].email}</span>
			</div>
			<div>
				<b>{users[2].usersname}</b> <span>{users[2].email}</span>
			</div>
		</div>

	);
}

export default usersList;

 

결과

 

잘 나오긴 하지만 재사용 할 수 있도록 바꿔보자

 

---

재사용 버전

 

UserList.js

 

 

import React from 'react';

function User({ user }) {
	return (
		<div>
			<b>{user.username}</b> <span>({user.email})</span>
		</div>
	);
}

function UserList() {
	const users = [
		{
			id: 1,
			username: 'velopert',
			email: 'public.velopert@example.com'
		},
		{
			id: 2,
			username: 'tester',
			email: 'tester@example.com'
		},
		{
			id: 3,
			username: 'admin',
			email: 'imAdmin@example.com'
		}
	];

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

	);
}

export default UserList;

 

결과

 

---

배열이 고정적이라면 상관 없지만 배열의 인덱스를 하나하나 조회해서 렌더링 하는것은 동적인 배열을 렌더링하지 못함

 

동적인 배열을 렌더링 할때는 map() 함수를 사용하자!

 

map() 함수는 배열안에 있는 각 원소를 변환해서 새로운 배열을 만들어준다.

리액트에서 동적인 배열을 렌더링해야 할 때는 이 함수를 사용하여 일반 데이터 배열을

리액트 엘리먼트로 이루어진 배열로 변환해주면 된다.

 

UserList.js

 

import React from 'react';

function User({ user }) {
	return (
		<div>
			<b>{user.username}</b> <span>({user.email})</span>
		</div>
	);
}

function UserList() {
	const users = [
		{
			id: 1,
			username: 'velopert',
			email: 'public.velopert@example.com'
		},
		{
			id: 2,
			username: 'tester',
			email: 'tester@example.com'
		},
		{
			id: 3,
			username: 'admin',
			email: 'imAdmin@example.com'
		}
	];

	return (
		<div>
			{users.map(user => (
				<User user={user} />
			))}
		</div>

	);
}

export default UserList;

 

결과

 

코드는 간단해지고 결과는 같아진다.

 

---

근데? 브라우저에서 콘솔을 열어보면

 

이런 에러가 보인다.

 

리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야 한다.

key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야한다.

지금의 경우에는 id !

 

UserList.js

 

import React from 'react';

function User({ user }) {
	return (
		<div>
			<b>{user.username}</b> <span>({user.email})</span>
		</div>
	);
}

function UserList() {
	const users = [
		{
			id: 1,
			username: 'velopert',
			email: 'public.velopert@example.com'
		},
		{
			id: 2,
			username: 'tester',
			email: 'tester@example.com'
		},
		{
			id: 3,
			username: 'admin',
			email: 'imAdmin@example.com'
		}
	];

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

	);
}

export default UserList;

바로 위 코드에서 key 값만 설정해주자

 

그럼 에러가 사라진다.

 

만약에 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map() 함수를 사용 할 때 

설정하는 콜백함수의 두번째 파라미터 index 를 key 값으로 사용하면 된다.

 

		<div>
        // 매개변수에 index도 추가!
			{users.map((user, index) => (
				<User user={user} key={index} />
			))}
		</div>

 

 

---

key 의 존재유무에 따른 업데이트 방식

 

예를 들어서

 

	const arr = ['a', 'b', 'c', 'd'];

	arr.map(item =>
		<div>{item}</div> 
		);

 

이런식의 배열에 렌더링을 했는데, 배열이 업데이트 될 때 위의 코드처럼 key 가 없다면

 

b 와 c 사이에 z 를 넣을때 div 테그를 삽입하는게 아니라

기존의 c 가 z 로 바뀌고 d 는 c 로, 맨 마지막에 d가 새로 삽입된다.

 

허접하지만 이런느낌

 

 

하지만 key 가 있다면?

 

[
  {
    id: 0,
    text: 'a'
  },
  {
    id: 1,
    text: 'b'
  },
  {
    id: 2,
    text: 'c'
  },
  {
    id: 3,
    text: 'd'
  }
];
// 이런식으로 고유 key 가 있을 시
arr.map(item => <div key={item.id}>{item.text}</div>);

 

이런식으로 삽입 되거나 삭제 된다.

따라서 배열을 렌더링 할 때에는 고유한 key 값이 있는 것이 중요하며,

중복 key가 있을 땐 렌더링시에 오류가 발생하고 업데이트가 제대로 이루어 지지 않는다!

 

참고 : https://react.vlpt.us/basic/11-render-array.html