10강 리스트와 키

1. 리스트

• 같은 아이템을 순서대로 모아놓은것

2. 키

• 각 객체나 아이템을 구분할 수 있는 고유한 값

3. 여러개의 컴포넌트 렌더링

• 자바스크립트 배열의 map() 함수를 사용
  : 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 결과를 배열로 만들어 리턴함
  : map() 함수 안에 있는 엘리먼트는 꼭 키가 필요함

const students = [
	{
      	id : 1,
		name: "mark",
	},
	{
      	id : 2,
		name: "mark2",
	},
	{
      	id : 3,
		name: "mark3",
	},
	{
      	id : 4,
		name: "mark4",
	},
];
function AttendanceBook(props) {
	return (
		<ul>
			{
              students.map((students) => {
				return <li key={students.id}>{students.name}</li>;
				})
			}
		</ul>
	);
}

4. 리스트의 키

• 리스트에서 아이템을 구분하기 위한 고유한 문자열
• 리스트에서 어떤 아이템이 변경, 추가 또는 제거 되었는지 구분하기 위해 사용
• 리액트에서는 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 됨

5. 다양한 키값의 사용법

• id를 사용
  : id의 의미 자체가 고유한 값이므로 키값을 사용하기 적합
  : id가 있는 경우에는 보통 id값을 키값으로 사용

• index를 사용
  : 배열에서 아이템의 순서가 바뀔수 있는 경우에는 키값으로 index를 사용하는것을 권장하지 않음
  : 리액트에서 키를 명시적으로 넣어주지 않으면 기본적을 이 index 값을 키값으로 사용