[ React 공식문서 ] UI 구상하기 (7) : 목록 렌더링

 

Javascript 배열 메서드를 활용해서 데이터 배열을 조작할 수 있다

1. 배열에서 데이터 렌더링하기

<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>

• 이런 목록 항목의 유일한 차이점은 콘텐츠, 즉 데이터다
• 이런 데이터들을 자바스크립트 배열에 저장하고, map 이나 filter 등을 사용해 컴포넌트 목록을 렌더링할 수 있다.

 

Step 1) 데이터를 배열에 넣기

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

Step 2) JSX 노드 배열과 매핑하기

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

Step 3) 해당 목록을 <ul> 태그로 감싸기

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

Error : key props 이 없다

• 위의 내용을 확인하면 React 에서 각 목록에 고유한 key 값이 있어야 한다고 에러를 보여줄 것이다
• 이 key 에 대한 내용은 아래에서 자세히 설명

---

2. 항목 배열 필터링하기

• 위의 데이터를 더 구조화한 예시가 아래의 코드다.

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',
}];

• 만약 여기서 profession 이 ‘chemist’ 인 사람만을 표시하길 원한다면 filter 메서드를 활용하면 된다

export default function List() {
	// .filter() 를 활용해 chemist 인 사람만 남긴다
  // chemists 라는 변수를 따로 할당할 필요는 없다
	// >> 메서드 체이닝으로 바로 .map() 을 사용해 JSX 목록과 매핑시킬 수 있다
  const chemists = people.filter(person =>
    person.profession === 'chemist'
  );
	
  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>
  );

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

---

3. key 로 목록의 항목 순서 유지하기

• 각 배열 항목에는 해당 배열 항목 사이에서 고유하게 식별할 수 있는 key 를 부여해야 한다
  • map() 내부에서 호출한 JSX 요소에는 반드시 key 가 필요하다
• 위의 데이터에서는 고유한 id 값이 있으니 이를 활용하면 된다

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

 

3-1) 왜 Key 가 필요한가?

• key 는 각 컴포넌트가 어떤 배열 항목에 해당하는지 알려주는 지표가 된다.
• 즉, 렌더링된 목록을 정렬, 이동, 삽입, 삭제할 때, 이 key 값을 활용해서 정확하고 빠르게 DOM 트리를 업데이트 시킨다.
• 공식문서에서는 key 를 즉석에서 생성시키기 보다는 데이터에 해당 key 를 포함시켜야 한다고 쓰여 있다

 

3-2) key 를 얻을 수 있는 곳

• DB 에서 저장된 key 를 사용하기
• crypto.randomUUID() 혹은 uuid 등을 사용하기

 

3-3) key 규칙

• key는 형제간에 고유해야 한다
• key는 변경돼선 안 된다.

 

3-4) React 에서 key 가 필요한 이유?

• key 를 사용하면 형제 항목 사이 특정 항목을 고유하게 식별할 수 있다
• 잘 선택한 key 는 배열 내 위치보다 더 많은 정보를 제공한다
  • 재정렬로 인해서 어떤 항목의 위치가 변경되더라도 항목이 사라지지 않는 한, key 를 통해 그 항목을 식별할 수 있기 때

 

3-5) 배열의 index 혹은 즉석에서 key 를 생성하면 안 되는 이유

• 인덱스를 key 로 사용했을 때는 종종 혼란을 야기할 수 있는 버그를 발생시킨다.
• 마찬가지로 key={Math.random()} 처럼 즉석에서 key 로 사용해서도 안 된다
  • 이 방식은 렌더링 될 때마다 key 가 일치하지 않아서 모든 컴포넌트와 DOM 이 다시 생성되는 최악의 결과를 만들어 낸다