Wecode 23日目


08:00~09:20ジム
10:00以上コード到着
今日は昨日のメッセージタスクを完了し、コンポーネントを分離しました.
午後、彼はメンバーたちと集まって、お互いに相手のコードを評価し、GighhubにPRするコードに時間を費やした.
相互にコメントした事項について、PRを見直すことにしました.

上図に示すように、1つのホームページだけで3つのコンポーネントに分けることができますが、元のコンポーネントは1つの機能しか持っていないのが理想的なので、より小さな部分に分けます.

なぜmap関数を書き込むときにキー値を入力するのか


https://ko.reactjs.org/docs/lists-and-keys.html
上のreact公式文書に詳しく説明しますが、私の気持ちで書きます.
Keyは、Reactがどのアイテムを変更または削除するかを識別するのに役立ちます.安定して使用できるように、タイル内部のレイヤーに割り当てます.
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);
鍵を選択する最良の方法は、ほとんどの場合、データのIDを鍵として使用することである.
const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);
ただし、レンダリングされたアイテムに信頼できるIDがない場合は、アイテムのインデックスをキーとして使用できます.
インデックスの使用は避けてください.