Rendering Lists목록 렌더링

Rendering data from arrays 배열에서 데이터 렌더링하기

Say that you have a list of content. 다음과 같은 콘텐츠 목록이 있다고 가정해 보겠습니다.

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

The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like map() and filter() to render lists of components from them. 이러한 목록 항목의 유일한 차이점은 콘텐츠, 즉,데이터입니다. 댓글 목록에서 프로필 이미지 갤러리에 이르기까지 인터페이스를 구축할 때 서로 다른 데이터를 사용하여 동일한 컴포넌트의 여러 인스턴스를 표시해야 하는 경우가 종종 있습니다. 이러한 상황에서는 해당 데이터를 JavaScript 객체와 배열에 저장하고 map() 및 filter()와 같은 메서드를 사용하여 컴포넌트 목록을 렌더링할 수 있습니다.

Here’s a short example of how to generate a list of items from an array: 다음은 배열에서 항목 목록을 생성하는 방법에 대한 간단한 예시입니다:

1. Move the data into an 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. Map the people members into a new array of JSX nodes, listItems: people 멤버를 새로운 JSX 노드 배열인 listItems에 매핑합니다:

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

3. Return listItems from your component wrapped in a <ul>: 컴포넌트에서 <ul>로 감싼 listItems를 반환합니다:

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

Here is the result: 결과는 다음과 같습니다:

Notice the sandbox above displays a console error: 위의 샌드박스에 콘솔 오류가 표시되는 것을 확인할 수 있습니다:

You’ll learn how to fix this error later on this page. Before we get to that, let’s add some structure to your data. 이 오류를 수정하는 방법은 이 페이지의 뒷부분에서 알아보겠습니다. 그 전에 데이터에 몇 가지 구조를 추가해 보겠습니다.

Filtering arrays of items항목 배열 필터링하기

This data can be structured even more. 이 데이터는 훨씬 더 구조화할 수 있습니다.

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',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'chemist',  
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

Let’s say you want a way to only show people whose profession is 'chemist'. You can use JavaScript’s filter() method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns true or false), and returns a new array of only those items that passed the test (returned true). profession이 'chemist'인 사람만 표시하는 방법을 원한다고 가정해 봅시다. JavaScript의 filter() 메서드를 사용하여 해당 사람들만 반환할 수 있습니다. 이 메서드는 항목 배열을 받아 “테스트”(true 또는 false를 반환하는 함수)를 통과한 후, 테스트를 통과한 항목만 포함된 새 배열을 반환합니다(true 반환).

You only want the items where profession is 'chemist'. The “test” function for this looks like (person) => person.profession === 'chemist'. Here’s how to put it together: profession이 'chemist'인 항목만 원합니다. 이를 위한 “test” 함수는 (person) => person.profession === 'chemist'와 같습니다. 이를 조합하는 방법은 다음과 같습니다:

1. Create a new array of just “chemist” people, chemists, by calling filter() on the people filtering by person.profession === 'chemist':
   people에서 person.profession === 'chemist' 조건으로 filter()를 호출하여, “chemist”만 있는 새로운 배열인 chemists를 생성합니다:

const chemists = people.filter(person =>
  person.profession === 'chemist'
);

2. Now map over chemists:
   이제 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. Lastly, return the listItems from your component:
   마지막으로 컴포넌트에서 listItems를 반환합니다:

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

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

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

Keeping list items in order with keykey로 목록의 항목 순서 유지하기

Notice that all the sandboxes above show an error in the console: 위의 모든 예제 샌드박스에서 콘솔에 오류가 표시되는 것에 주목해 봅시다:

You need to give each array item a key — a string or a number that uniquely identifies it among other items in that array: 각 배열 항목에는 해당 배열의 항목들 사이에서 고유하게 식별할 수 있는 문자열 또는 숫자인 key를 부여해야 합니다:

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

Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree. key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 합니다. 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요해집니다. 잘 만들어진 key는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움이 됩니다.

Rather than generating keys on the fly, you should include them in your data: 즉석에서 key를 생성하는 대신 데이터에 포함시켜야 합니다:

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

Where to get your keykey를 얻을 수 있는 곳

Different sources of data provide different sources of keys: 데이터 소스에 따라 서로 다른 key 소스를 제공합니다:

• Data from a database: If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
• Locally generated data: If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, crypto.randomUUID() or a package like uuid when creating items.

Rules of keys Key 규칙

• Keys must be unique among siblings. However, it’s okay to use the same keys for JSX nodes in different arrays.
• Keys must not change or that defeats their purpose! Don’t generate them while rendering.

Why does React need keys? React에 key가 필요한 이유는 무엇일까요?

Imagine that files on your desktop didn’t have names. Instead, you’d refer to them by their order — the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on. 데스크톱의 파일에 이름이 없다고 상상해 봅시다. 파일 이름 대신 첫 번째 파일, 두 번째 파일 등의 순서로 파일을 참조할 것입니다. 물론 익숙해질 수도 있지만, 파일을 삭제하면 혼란스러워질 수도 있습니다. 두 번째 파일이 첫 번째 파일이 되고, 세 번째 파일이 두 번째 파일이 되는 식으로 말이죠.

File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the position changes due to reordering, the key lets React identify the item throughout its lifetime. 폴더의 파일 이름과 배열의 JSX key는 비슷한 역할을 합니다. key를 사용하면 형제 항목 사이에서 특정 항목을 고유하게 식별할 수 있습니다. 잘 선택한 key는 배열 내 위치보다 더 많은 정보를 제공합니다. 만약 재정렬로 인해 어떤 항목의 위치가 변경되더라도, 해당 항목이 사라지지 않는 한, React는 key를 통해 그 항목을 식별할 수 있습니다.