React - List와 Key

1. Key란❓

key는 리스트(<li></li>) 요소를 만들 때 포함해야 하는 특수한 문자열 속성 으로, 요소에 안정적인 고유성을 부여하기 위해 배열 내부 요소에 지정 해야 한다. 이는 React가 어떤 항목을 변경, 추가, 삭제할 건지 식별하는 것을 돕는다.

📍 예시

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

2. key가 될 수 있는 것

1. key는 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 좋다. 대부분의 경우 데이터의 id 를 key로 사용한다.

2. 안정적인 id가 없다면 Date.now().toString()을 사용해도 좋다.

3. 항목의 순서가 바뀔 수 있는 경우 인덱스 를 key로 사용하는 것은 성능 저하 및 state 관련 문제가 발생할 수 있으므로 되도록 지양하는 것이 좋다.

3. key의 특성

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

React에서 key는 힌트를 제공하지만 컴포넌트로 전달하지는 않는다. 컴포넌트에서 key와 동일한 값이 필요하면 아래와 같이 다른 이름의 prop으로(보통 id를 많이 씀) 명시적으로 전달한다.

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

→ Post 컴포넌트는 props.id를 읽을 수 있지만 props.key는 읽을 수 없다.

4. 올바른 key 사용 예시

경험상 map() 함수 내부에 있는 엘리먼트에 key를 넣어 주는 게 좋다.

function ListItem(props) {
  // <li> 안에 key를 지정하지 않는다 ❗
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 🌟 이곳 map()안의 리턴되는 컴포넌트 안에서 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')
);

5. JSX에 map( ) 포함시키기

이 방식을 사용하면 코드가 더 깔끔해지지만 남발하지 않는 것이 좋다.

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

📚 reference

https://ko.reactjs.org/docs/lists-and-keys.html