목록의 각 항목에 여러 개의 DOM 노드 표시하기

짧은 <>…</> Fragment 구문으로 key를 전달할 수 없으므로 단일 <div>로 그룹화하거나, 약간 더 길고 더 명시적인 <Fragment>구문을 사용해야합니다.


import { Fragment } from 'react';

const listItems = people.map(person => 
	<Fragment key={person.id}>
		<h1>{person.name}</h1>
		<p>{person.bio}</p>
	</Fragment>
);

Fragment는 DOM에서 사라지므로, 이렇게 하면 <h1>, <p>등의 1차원 목록이 생성됩니다.