Chapter 1. Describing the UI

#7 목록 렌더링

학습 목차

1. 배열에서 데이터 렌더링하기
2. 항목 배열 필터링하기
3. key로 목록의 항목 순서 유지하기

---

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

• 댓글 목록에서 프로필 이미지 갤러리에 이르기까지 인터페이스를 구축할 때 서로 다른 데이터를 사용하여 동일한 컴포넌트의 여러 인스턴스를 표시해야 하는 경우가 종종 발생한다.
• 이러한 상황에서는 해당 데이터를 JavaScript 객체와 배열에 저장하고 map() 및 filter()와 같은 메서드를 사용하여 컴포넌트 목록을 렌더링할 수 있습니다.

// 예시

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

1. 데이터를 배열로 이동
2. people 멤버를 새로운 JSX 노드 배열인 listItems에 매핑
   const listItems = people.map(person => <li>{person}</li>);
3. 컴포넌트에서 <ul>로 감싼 listItems를 반환
   return <ul>{listItems}</ul>;

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

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

• 이렇게 작성 시, 콘솔에 오류가 발생한다.
  경고: 목록의 각 자식에는 고유한 “key” prop이 있어야 합니다.

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

1. people에서 person.profession === 'chemist' 조건으로 filter()를 호출하여, “chemist”만 있는 새로운 배열인 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를 반환한다.
   return <ul>{listItems}</ul>;

주의

• 화살표 함수는 => 바로 뒤에 표현식을 암시적으로 반환하므로 return 문이 필요하지 않다.

const listItems = chemists.map(person =>
  <li>...</li> // Implicit return!
);

• 그러나 => 뒤에 { 중괄호가 오는 경우 return을 명시적으로 작성해야 한다.

const listItems = chemists.map(person => { // Curly brace
  return <li>...</li>;
});

• => {가 포함된 화살표 함수는 “블록 본문”을 가져야 한다.
  이 경우 한 줄 이상의 코드를 작성할 수 있지만, 반드시 직접 return 문을 작성해야 한다.
  return을 잊으면 아무것도 반환되지 않는다.

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

• map() 호출 내부의 JSX 요소에는 항상 key가 필요하다.
• key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 한다.
• 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요해진니다.
• 잘 만들어진 key는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움된다.

3-1. key를 얻을 수 있는 곳

• 데이터 소스에 따라 서로 다른 key 소스를 제공한다.
  • 데이터베이스의 데이터: 데이터베이스에서 데이터를 가져오는 경우, 고유한 데이터베이스 key/ID를 사용할 수 있다.
  • 로컬에서 생성된 데이터: 데이터가 로컬에서 생성되고 유지되는 경우 (예: 메모 작성 앱의 메모), 항목을 만들 때 증분 카운터, crypto.randomUUID() 또는 uuid와 같은 패키지를 사용하자.

3-2. key 규칙

• key는 형제간에 고유해야한다. 다른 배열의 JSX 노드에는 동일한 key를 사용해도 괜찮다.
• key가 변경되지 않아야한다. 그렇지 않으면 목적에 어긋나게 되기 때문에 렌더링 중에는 생성하지 말자.

3-3. React에 key가 필요한 이유는?

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

주의

• 배열에서 항목의 인덱스를 key로 사용하고 싶을 수도 있습니다. key를 지정하지 않으면, React는 인덱스를 key로 사용한다.
  그러나 렌더링한 항목의 순서는 새 항목이 삽입되거나, 삭제되거나, 배열의 순서가 바뀌는 등에 따라 변경될 수 있습니다.
  인덱스를 key로 사용하면 종종 미묘하고 혼란스러운 버그가 발생한다.
• 마찬가지로 key={Math.random()}과 같이 즉석에서 key를 생성하면 안된다.
  이렇게 하면 렌더링될 때마다 key가 일치하지 않아 매번 모든 컴포넌트와 DOM이 다시 생성된다.
  속도가 느려질 뿐만 아니라 목록 항목 내부의 사용자 입력도 손실된다.
  대신 데이터에 기반한 안정적인 ID를 사용하자.
• 컴포넌트는 key를 prop으로 받지 않는다는 점에 유의하자.
  React 자체에서 힌트로만 사용된다.
  컴포넌트에 ID가 필요한 경우 별도의 프로퍼티로 전달해야 한다.
  // 예시 <Profile key={id} userId={id} />

---

요약

• 데이터를 컴포넌트에서 배열이나 객체와 같은 데이터 구조로 이동하는 방법.
• JavaScript의 map()을 사용하여 비슷한 컴포넌트 집합을 생성하는 방법.
• JavaScript의 filter()를 사용하여 필터링된 항목의 배열을 만드는 방법.
• 컬렉션의 각 컴포넌트에 key를 설정해 위치나 데이터가 변경되더라도 React가 각 컴포넌트를 추적할 수 있도록 하는 이유와 방법.

---

React 공식 문서

https://react.dev/

React 비공식 번역 문서

https://react-ko.dev/

MDN

https://developer.mozilla.org/ko/