[TIL]Key

Key란?

• key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 고유값을 의미한다.
• key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별 할 수 있는 문자열을 사용하고 대부분의 경우 데이터의 ID를 key로 사용한다.

const todoItems = todos.map((item) => 
      <li key={item.id}>
         {todo.text}
      </li>

만약! 렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있다.

const todoItems = todos.map((item , index) => 
      <li key={idx}>
         {todo.text}
      </li>

하지만 항목의 순서가 바뀔 수 있는 경우 key에 index를 사용하는 것은 권장하지 않는다. 이로 인해 성능이 저하 되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있기 때문이다.

key를 지정하지 않으면 나타날 수 있는 문제점!

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 값을 설정해 주지 않는다면 화면에 정상적으로 렌더링 되지만 "key" prop에러가 발생하여 변경 요소가 없는 데이터까지 Dom을 조작하여 불필요한 렌더링이 발생한다. 그렇기 때문에 고유한 key 값을 설정하여 변경사항이 있는 부분만 캐치하여 리렌더링 할 수 있게 해야한다.