React | key props를 사용하는 이유

React

목차

key props를 사용하는 이유

key props를 사용하는 이유

React에서의 key : element list를 만들 때 포함해야 하는 문자열 속성으로, 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움

→ 대부분 데이터의 ID를 key로 사용(list에서 해당 항목을 고유하게 식별할 수 있는 문자열)

1. map함수 적용시 Key props를 사용하는 이유

   • key값이 없는 element로 이루어진 트리에서 새로운 element가 추가될 경우, React는 모든 자식요소를 다시 변경하므로 비효율적이고 성능이 좋지 않음

   • 자식 요소들이 key를 가지고 있다면 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인하므로 트리의 변환이 효율적으로 이루어짐

     사용예시

     //map 예시
     <div>
         {postList.data?.map((post)=> {
             return(
                 <div
                     onClick={()=>
                         navigate(`/detail/${post.id}`)
                     }
                         key={post.id} //좋은 방식은 아님 → Date.now() 추천
                     >
                         <Post post={post}/>
                     </div>
                     );
             })}
     </div>
     
     
     //일반 코드 예시
     
     //변경 전 트리(key X)
     <ul>
       <li>딸기</li>
       <li>바나나</li>
     </ul>
     //변경 후 트리(key X) : <ul>의 모든 자식요소를 다시 변경한다.
     <ul>
       <li>복숭아</li>
       <li>딸기</li>
       <li>바나나</li>
     </ul>
     
     //변경 전 트리(key O)
     <ul>
       <li key="2019">딸기</li>
       <li key="2020">바나나</li>
     </ul>
     //변경 후 트리(key O): <key="2018"> 값만 이동시킨다.
     <ul>
         <li key="2018">복숭아</li>
         <li key="2019">딸기</li>
         <li key="2020">바나나</li>
     </ul>
     

     
     

2. 배열의 index 사용은 지양하기

   • key값을 배열의 index로 지정할 경우, 배열의 순서가 바뀌면 component의 state와 관련된 문제가 발생
   • 항목의 순서가 바뀌었을 때 key도 변경되기 때문에 state까지 의도치않게 변경될 수 있음
   • 명시적으로 key를 지정하지 않을 경우 React는 기본적으로 인덱스를 key로 사용 → 별도의 key 지정 필요

---

출처

key props