컴포넌트 반복

map() 함수

자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다.

arr.map(callback, [thisArg]);

map() 함수 레퍼런스

컴포넌트에 적용한 예제

import React from 'react';

const Sample = () => {
	const names = ['아메리카노', '카푸치노', '에스프레소', '유자라떼'];
	const nameList = names.map((name) => <li>{name}</li>);
	return <ul>{nameList}</ul>;
};

export default Sample;

key

key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다.

key 설정

key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 됩니다.
고유한 키값이 없을 때만 index를 키 값으로 사용하면 됩니다.

컴포넌트에 적용한 예제

import React from 'react';

const Sample = () => {
	const names = ['아메리카노', '카푸치노', '에스프레소', '유자라떼'];
	const nameList = names.map((name, index) => <li key={index}>{name}</li>);
	return <ul>{nameList}</ul>;
};

export default Sample;

리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.