React - List 를 Render하는 방법 (Rendering Lists)

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

Rendering Lists

JavaScript 배열 methods인 filter()와 map()를 사용하여 데이터를 다룰 수 있다.

Rendering data from arrays

인터페이스를 구축할 때 동일한 구성으로 되어있는 요소들을 렌더링할 때가 있다.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

위의 코드는 tag로 되어 있는 contents이다.

1.데이터를 array안으로 옮긴다.

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

2. people 배열을 listItmes에 매핑한다.

const listItems = people.map(person => <li>{person}</li>);

3. ul 태그로 래핑된 구성 요소 listItems를 return 한다.

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

Filtering arrays of items

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
}, {
  name: 'Percy Lavon Julian',
  profession: 'chemist',  
}, {
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

위의 data에서 profession가 'chemist'인 사람만 알기 원한다면 filter를 사용하면 된다.
filter는 배열을 가져와 조건문을 만족하는 항목들만 새 배열로 반환한다.

1. people에 대해 filter를 호출하여 직업이 'chemist'인 사람을 filter 하여 chemists라는 이름의 새로운 배열은 만든다.
```
const chemists = people.filter(person => person.profession === 'chemist' );
```

2. chemists를 매핑한다.

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       known for {person.accomplishment}
     </p>
  </li>
);

3. 구성요소에 listItems을 반환한다.

Tip))
Arrow functions "()=>"은 바로 뒤의 표현식을 반환해 return이 필요하지 않다.
하지만 function의 길이가 길어져 {}를 사용할 경우 return 을 작성해줘야한다.

Keeping list items in order with key

각 배열 항목에는 키를 제공해야 한다. 해당 배열의 다른 항목과 다른 고유하게 식별할 수 있는 문자열/숫자이다.

<li key={person.id}>...</li>

JSX 요소에서 map() 호출 내부에는 항상 Key가 필요하다.

키는 각 구성 요소가 해당하는 배열 항목을 React에 알려 나중에 일치시킬 수 있도록 한다. 이것은 배열 항목이 이동(예: 정렬으로 인해), 삽입 또는 삭제될 수 있는 경우 중요하다.

잘 선택된 키는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움이 됩니다.

키 규칙

키는 같은 배열 안에서 고유해야 한다. 그러나 다른 배열의 JSX 노드에 대해 동일한 키를 사용하는 것은 괜찮다.

키는 렌더링하는 동안 생성하지 않아야 하고, 키는 변경되어서는 안된다.

Let's develop level up