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は、リスト内の他のアイテム間でアイテムを一意に識別できる文字列を使用することが望ましい.ほとんどの場合、データのidは鍵として使用されます.

安定したidがなければDate.now().toString()を使用することができる.

プロジェクトの順序が変更される可能性がある場合は、パフォーマンスの低下やステータスに関連する問題を引き起こす可能性があるため、インデックスをキーとして使用することは避けてください.

3.keyの特性
鍵はアレイ内の兄弟間でのみ一意であり、範囲全体で一意である必要はありません.つまり、2つの異なる配列を作成するときに、同じキーを使用することができます.
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.正しい鍵の使用例
経験上  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