리액트 key

리액트 Key

리액트에서 key 는 어떤 항목을 변경, 추가 삭제할지 식별하는 것을 돕는다.
리액트에서 map() 함수를 이용해서 배열을 반복 실행할 수 있다.
다음의 예시를 보자.

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

출력화면

위 코드를 실행하면 다음과 같은 경고창이 뜬다.

경고

배열의 각 항목에 unique한 key를 넣으라는 뜻이다.

 

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key = {String(numbers)}> // 각 항목에 key를 할당하였다.
   {number}
  </li>
);

이렇게 바꿔주면 경고가 뜨지 않는다.

 

전체코드

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 는 형제사이에서 고유하고 전체 범위에서 고유할 필요는 없다.

다음 코드를 보자.

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>  //key에 1,2 가 할당된다.
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>     //sidebar처럼 key에 1,2 가 할당된다.
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

위 코드에서 보았듯 여러개의 다른 배열들을 만들 때 동일한 key를 사용할 수 있다.

같은 배열 내에서는 key값이 고유해야 한다.

리액트에서 key가 필요한 이유

리액트에서 배열을 통해 매핑되어 렌더링되넌 컴포넌트들중 무엇이 변경되었고, 삭제되었는지 혹은 추가되었는지 빠르게 식별하기 위한 유니크키가 필요하다. 각 엘리먼트에 안정성을 부여하기 위해 유니크값을 key로 부여하는 것 이다.

그래서 index를 key에 넣는 것은 의미가 없다. index는 유니크하지 않고 순서가 변경될때마다 같이 변경되기 때문이다.