여러개의 컴포넌트 렌더링 하기
- 자바스크립트 배열의 프로토타입 메서드 중 하나인 map과 JSX를 활용하여 여러개의 컴포넌트 렌더링 가능
- key: 엘리먼트 리스트를 만들 떄 포함해야 하는 특수한 문자열 어트리뷰트
- 어떤 항목을 변경, 추가, 삭제할 지 식별하는 것을 도움
- 엘리먼트에 안정적인 고유성 부여
- 배열의 인덱스보다는 식별할 수 있는 문자열을 사용하기
- map 내부의 엘리먼트에서 key를 넣어줄 것
- 형제 사이에서 고유하면 됨
연속된 li 엘리먼트 렌더링하기
...
// 각 요소별로 고양이에 대한 정보 객체를 가지는 배열
const cats = [
{name: 'siru', age: 7},
{name: 'nunu', age: 6},
{name: 'mango', age: 7},
{name: 'meonji', age: 4},
];
// 각 요소를 li 태그에 표현
cats.map((item, index) => {
// 각 아이템에 대해 식별하기 위한 고유한 문자열
const uniqueID = `${item.name}-${index}`;
// 각 요소에 대한 정보를 li 태그 안에 표현
return <li key={uniqueID}>이름 :{item.name} / 나이: {item.age}</li>
});
Reference
React 공식 문서