리스트렌더링, key속성

리스트렌더링

• 배열 데이터는 map메서드로 렌더링
• 리스트가 정렬, 이동, 삭제등으로 변경되더라도 리액트가 알 수 있도록 고유 key 제공해야함, map메서드의 index는 배열요소 순서가 변경되면 바뀌므로 사용불가

// App.jsx
import './App.css';

const people = [
  'Creola Katherine Johnson: 수학자',
  'Mario José Molina-Pasquel Henríquez: 화학자',
  'Mohammad Abdus Salam: 물리학자',
  'Percy Lavon Julian: 화학자',
  'Subrahmanyan Chandrasekhar: 천체 물리학자',
];

export default function List() {
  const listItems = people.map((person) => <li key={person}>{person}</li>);

  return <ul>{listItems}</ul>;
}

 

배열의 객체 필터링하기

• 익명함수로 화살표 함수 사용시 한줄일 경우 {return} 생략가능
• 리스트의 key로 사용하기위해 데이터에 id가 포함되야함

export const people = [
  {
    id: 0,
    name: 'Creola Katherine Johnson',
    profession: '수학자',
    accomplishment: '우주 비행 계산',
    imageId: 'MK3eW3A',
  },
  .
  .
  .
  .

export default function List() {
  const chemists = people.filter((person) => person.profession === '화학자');

  return (
    <ul className="list">
      {chemists.map((person) => (
        <li key={person.id}>
          <img className="avatar" src={getImageUrl(person)} />
          <p>
            <b>{person.name}: </b>
            {person.profession}
            <b> 업적: </b>
            {person.accomplishment}
          </p>
        </li>
      ))}
    </ul>
  );

key 규칙

• 데이터베이스에서 가져오는 경우 고유 데이터베이스 ID사용
• 메모앱등의 로컬 생성 데이터는 데이터 생성시 uuid 패키지 사용하여 고유 식별자 생성
• key는 형제 간에 고유해야하며 변경되면 안됨
• 배열 인덱스는 key로 사용 불가, key는 prop으로 전달되지않으므로 별도 prop으로 전달