Colin's Blog
[React] 리스트와 키

리스트와 키

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

위의 코드는 map 메소드를 사용하여 numbers 의 각 항목을 2 배로 만들었습니다.
React 에서도 비슷한 과정을 통해 요소 목록을 배열로부터 계산해낼 수 있습니다.


컴포넌트 여러 개를 렌더링하기

요소 목록을 만든 뒤에는 중괄호 {} 를 사용하여 JSX 에 포함 시키는 것이 가능합니다.

아래 예제에서는 자바스크립트의 map() 함수를 사용해서 numbers 배열을 순회하면서,
각 항목에 대해 <li> 요소를 반환합니다. 마지막으로, 결과적으로 얻어낸 요소 배열을 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"));

이 코드는 1 부터 5 까지의 숫자로 이루어진 목록을 표시합니다.


기본적인 목록 컴포넌트

여러분은 대개 컴포넌트 안에서 목록을 렌더링하게 됩니다.

이전 예제를 리팩토링해서, 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")
);

이 코드를 실행하면, 목록의 각 항목에 키를 넣어야한다는 경고가 표시됩니다.
“키(key)“는 요소 목록를 만들 때 포함해야하는 특수한 문자열 속성입니다.
다음 섹션에서 키의 중요성에 대해 더 살펴봅니다.

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

// map 메소드에서 반환하는 요소에는 key prop을 꼭 넣어줘야 합니다.
// key prop에서 다만 index를 사용해서는 안됩니다. (사용하나 마나입니다. / index가 바뀌지 않으면서 안정된 식별자가 필요할 경우 index를 넘겨주기도 합니다.)
// key를 주게되면 React는 정확히 어느 요소를 변경해야할지 알게되므로 의도한 대로 작동합니다.
// 하지만 key를 안주면 React는 정확히 어느 요소를 변경해야할지 모르므르 배열의 마지막 요소를 삭제합니다.

class NumberList extends React.Component {
  state = {
    numbers: [1, 2, 3, 4, 5]
  };
  render() {
    const numbers = this.state.numbers;
    const listItems = numbers.map((number, index) => (
      <div key={number}>
        <span>{number}</span>
        <input type="text" />
        <button
          onClick={e => {
            this.setState({
              numbers: numbers.filter((item, i) => i !== index)
            });
          }}
        >
          삭제
        </button>
      </div>
    ));
    return <ul>{listItems}</ul>;
  }
}

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


키

키를 지정해주면 어떤 아이템이 바뀌었는지, 추가되었는지, 삭제되었는 지를 React 에게 알려줄 수 있습니다.
(안알려주면 의도치않게 동작합니다.)

배열에 들어있는 요소마다 식별자를 키로 넣어주세요.

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

만약 그러한 값이 없다면, 최후의 수단으로 배열 인덱스를 키로 사용할 수도 있습니다.

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

항목 간 순서가 바뀔 수 있는 경우 키에 인덱스를 사용하지 않는 게 좋습니다.
이로 인해 성능이 저하되거나 컴포넌트의 state 와 관련된 문제가 생길 수 있습니다.
Robin Pokorny 가 작성한 아티클인 in-depth explanation on the negative impacts of using an index as a key 를 참고하시길 바랍니다.
[https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318]

만약 명시적으로 키를 지정하지 않으면 React 는 기본적으로 인덱스를 키로 사용합니다.


키로 컴포넌트 추출하기

키는 바로 바깥쪽의 배열에 대해서만 의미를 가집니다.

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

// 잘못된 키 사용법의 예

function ListItem(props) {
  const value = props.value;
  return (
    // 틀렸습니다! 여기서 키를 넣어주는 것은 아무런 효과가 없습니다.
    <li key={value.toString()}>{value}</li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map(number => (
    // 틀렸습니다! 바로 여기서 키를 넣어주어야 합니다.
    <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) {
  // 맞았습니다! 여기서 키를 넣어주는 것이 아닙니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map(number => (
    // 맞았습니다! 바로 여기서 키를 넣어주어야 합니다.
    <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")
);

”map() 에서 반환하는 요소에는 키를 넣어준다”고 외워두어도 좋습니다.


키는 형제 중에서 고유한 값이어야한다.

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

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 에게 힌트를 제공하지만 컴포넌트로 전달되지는 않습니다.
(역주: 컴포넌트 안에서 this.props.key 와 같이 가져와서 쓰는 것이 불가능)
만약 컴포넌트에 동일한 값이 필요하다면 명시적으로 다른 이름의 prop 으로 전달하세요.

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

위 예제에서 Post 컴포넌트는 props.id 를 읽을 수 있지만, props.key 는 읽을 수 없습니다.


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

위 스타일을 통해 코드가 더 명확해질 수도 있지만 남용하는 것은 좋지 않습니다.
자바스크립트와 마찬가지로, 가독성을 위해 변수로 추출해야할지 아니면 인라인으로 넣을지는 개발자가 직접 판단해야합니다.
map() 함수가 너무 중첩되어있다면, 컴포넌트로 추출 하는 것이 좋습니다.

[더 공부해보기]

© 2018 Colin. All rights reserved.