List

우선 JavaScript에서 리스트를 다루는 방법을 보자.

아래는 map() 메서드를 이용하여 numbers 배열 요소들의 값을 두 배로 만든 후, map()에서 반환하는 새 배열을 doubled 변수에 할당하는 코드이다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);

React에서 element의 배열을 사용하는 방식은 위에서 본 배열을 다루는 방식과 거의 동일하다.

여러 개의 element 렌더링 하기

JavaScript map() 메서드를 사용하여, numbers 배열의 각 요소들을 element로 변환한 후 배열을 만들어 반환하고, 반환값을 변수 listItems에 저장한다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

listItems 배열을 <ul> element 안에 포함하고 DOM에 렌더링한다.

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

Component안에서 리스트 다루기

위에서 다룬 numbers 배열을 component로 리팩토링해보자.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다. key는 element 리스트를 만들 때 포함해야하는 특수한 문자열 attribute이다. numbers.map() 안에서 리스트의 각 항목에 key를 할당하자.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

---

Key

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는데 사용된다. key는 element에 안정적인 고유성을 부여하기위해 배열 내부의 element에 지정해야한다.

const numbers = props.numbers;
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

key를 선택하는 가장 좋은 방법은 리스트의 다른 요소들 사이에서 해당 요소를 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 대부분의 경우 데이터의 id를 key로 사용한다.

const todoItems = todos.map((todo) =>
  <li key ={todo.id}>
    {todo.next}
  </li>
);

렌더링 할 요소에 대해 안정적인 id가 없다면, 최후의 수단으로 요소의 인덱스를 key로 사용하지만, 지양해야한다.

const todoItems = todos.map((todo, index) =>
  <li key ={index}>
    {todo.next}
  </li>
);

key로 component 추출하기

key는 인접한 배열의 context에서만 의미가 있다.

예를 들어, ListItem component를 추출한 경우, ListItem 안에 있는 <li> element가 아니라 배열의 element가 key를 가져야 한다.

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

key는 형제 사이에서만 고유한 값이어야 한다.

key는 배열 안의 요소들 사이에서 고유해야 한다. 전체 범위에서 고유할 필요는 없다. 즉, 두 개의 다른 배열을 만들 때 동일한 key를 사용해도 문제없다.

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

React에서 key는 component로 전달되지 않는다 따라서, component에서 key와 동일한 값이 필요하면 다른 이름의 props로 명시적으로 전달하면 된다.

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

JSX에 map() 포함시키기

위 예시에서 별도의 listItems 변수를 선언하고 이를 JSX에 포함했다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

JSX를 사용하면 중괄호 안에 모든 표현식을 사용할 수 있으므로, map() 메서드의 결과를 inline으로 처리할 수도 있다.

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}