[TIL]Key

9356 ワード
key TIL テキストリンク
キーって何?
  • キーは、Reactが変更、追加、または削除するアイテムを識別するのに役立つ一意の値を意味します.
  • キーを選択する最善の方法は、リスト内の他のアイテム間で1つの文字列を使用することであり、この文字列はアイテムを一意に識別することができ、多くの場合、データのIDをキーとして使用する.
    • const todoItems = todos.map((item) => 
      <li key={item.id}>
         {todo.text}
      </li>
    もし.レンダリングされたアイテムに安定したIDがない場合は、最後のキーとしてプロジェクトインデックスを使用できます.
    const todoItems = todos.map((item , index) => 
      <li key={idx}>
         {todo.text}
      </li>
    ただし、プロジェクトの順序が変更される可能性がある場合は、keyでindexを使用することは推奨されません.これにより、パフォーマンスが低下したり、構成部品の状態に関連する問題が発生する可能性があります.
    キーを指定しないと、問題が発生する可能性があります!
    const Post = [
 {id:0 , title: "hello", content:"hi"},
 {id:1 , title: "byungjin", content:"bj"},
 {id:2 , title: "siru", content:"sr"},
 {id:3 , title: "jiwon", content:"jw"},
]

//key 적용X
const mapPost = () => {
return(
   {Post.map((item, index) => {
    <div>
     <span>{item.title}</span>
     <span>{item.content}</span>
    </div>
})};
)};

//key 적용O
const mapPost = () => {
return(
   {Post.map((item, index) => {
    <div key={item.id}>
     <span>{item.title}</span>
     <span>{item.content}</span>
    </div>
})};
)};

//요소 수정
{id:0 , title: "bye", content: "byebye"}
// key값이 0인 부분만 렌더링
// key값이 0 이외에 나머지는 새로 리렌더링 X
    Postオブジェクトの値を適切にレンダリングするためにmap関数を使用しました.
    キー値を設定しない場合、画面は正常にレンダリングされますが、key propエラーが発生し、Domが変更されていないデータに操作され、不要なレンダリングが発生します.したがって、変更された部分のみをキャプチャしてレンダリングするために、一意のキー値を設定する必要があります.
    [ Code Kata ] 🤯🥵 python#17株式取引で利益が最も大きい値は?float('inf')
    redis共通コマンド、一般的なエラー、構成テクニックなどの共有