Lists and Keys(리스트와 키)

코더·2019년 1월 29일

React 공식문서 - MAIN CONCEPTS

목록 보기

12/16

https://reactjs.org/docs/lists-and-keys.html - 번역 글

자바 스크립트에서 목록을 변환하는 방법을 살펴 보겠습니다.

아래의 코드는 map()함수를 사용하여 배열의 numbers값을 두 배로 늘립니다. map()이 반환하는 새로운 배열의 참조를 변수 doubled에 저장합니다.

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

이 코드는 개발자 콘솔 [2, 4, 6, 8, 10]을 표시합니다.

React에서 배열을 요소 리스트로 변환하는것은 거의 동일합니다.

Rendering Multiple Components(다수 컴포넌트 렌더링)

요소 컬렉션을 만들고 중괄호{}를 사용하여 JSX에 포함 시키는 것이 가능합니다.

아래 예시는 JavaScript map()함수를 사용하여 numbers 배열을 순회 합니다. 그리고 <li> element를 반환합니다. 마지막으로 요소 배열 결과를 변수 listItems 에 할당합니다.

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

listItems 배열을 <ul> 요소 안에 삽입한 뒤 DOM에서 렌더링 합니다.

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

CodePen

이 코드는 1~5 사이의 숫자 목록(ul, li)을 표시합니다.

Basic List Component(기본 리스트 컴포넌트)

보통 리스트는 컴포넌트 안에서 렌더링합니다.

이전 예제를 numbers 배열을 받아서 순서없는 목록(ul)을 출력하는 컴포넌트로 리팩토링할 수 있습니다.

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')
);

이 코드를 실행하면 목록 항목에 키가 제공되어야한다는 경고가 표시됩니다. "키"는 요소 목록을 만들 때 포함해야하는 특수 문자열 속성입니다. 다음 섹션에서 왜 중요한지 논의 할 것입니다.

numbers.map()내부에 key항목을 지정하여 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')
);

CodePen

Keys

키는 변경, 추가, 제거 된 항목이 어떤 것들인지 인식하는데 도움을 줍니다. 요소에 안정적인 ID를 제공하려면 배열 내부의 요소에 키를 지정해야합니다.

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

키를 선택하는 가장 좋은 방법은 같은 레벨의 리스트에 대한 고유한 식별 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 키로 사용합니다.

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

렌더링 된 항목에 대한 안정적인 ID가없는 경우 최후의 수단으로 리스트 index를 키로 사용할 수 있습니다.

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

항목 순서가 변경 될 여지가 있다면 index를 사용하지 않는 것이 좋습니다. 이로 인해 성능이 저하되고 컴포넌트의 state에 문제가 발생할 수 있습니다.
index를 키로 사용하는 부정적인 영향에 대한 자세한 설명은 Robin Pokorny의 기사를 확인하십시오 . 만약 리스트 아이템에 명시적으로 키를 지정하지 않으면 React는 기본적으로 index를 키로써 사용합니다.

더 자세히 알고 싶다면 왜 키가 필요한가에 대한 설명을 참고 하세요.

Extracting Components with Keys(키로 컴포넌트 추출하기)

키는 주변 배열의 컨텍스트에서만 의미가 있습니다.

예를 들어, ListItem 컴포넌트를 추출한 경우, ListItem 자체의 루트 <li> 요소가 아닌 배열의 <ListItem /> 요소가 키를 가지고 있어야합니다.

잘못된 키사용

function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

올바른 키 사용

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <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')
);

CodePen

가장 좋은 규칙은 map() 내부의 요소에는 키가 필요하다는 것입니다.

Keys Must Only Be Unique Among Siblings(키는 형제를 식별할 수 있는 고유한 값이어야한다.)

배열 내에서 사용되는 키는 형제간에 고유해야합니다. 그러나 글로벌로 고유 할 필요는 없습니다. 두 개의 다른 배열을 생성 할 때 동일한 키를 사용할 수 있습니다.

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')
);

CodePen

key는 React에게 힌트 역할을하지만 컴포넌트로 전달되지는 않습니다. 컴포넌트에 동일한 값 전달이 필요한 경우 다른 이름의 props로 전달하십시오.

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

위의 예에서 <Post /> 컴포넌트는 props.id는 읽을 수 있지만 props.key는 읽을 수 없습니다.

Embedding map() in JSX(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()도 인라인으로 포함시킬 수 있습니다.

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

      )}
    </ul>
  );
}