리액트 key props ?

key props? 그게뭔데

key는 어떤 항목을 변경하거나 추가 혹은 삭제를 할때에 리액트 내부에서
해당 엘리먼트의 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정을 해야 한다

아래의 사진을 보자

자신이 배열에 담겨있는 값을 순차적으로 생성을 하였을때 이런 에러를 자주 봤을 것이다

해결 방법은 각각의 생성되는 항목들을 key라고하는 props를 부여해주면 에러가 사라진다

그렇다면 key라는 값은 어떻게 할당을 해주어야 할까 ?

첫번째로는 리스트의 다른 항목들 사이에서 각 항목별로 고유하게 식별할 수 있는 id값을 부여한다

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

두번째로는 id를 부여하지 않았다면 리스트의 자신의 위치인 인덱스를 key로 사용할 수 있다

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

이 두가지의 방법중에 가장 좋은것은 id를 직접적으로 각 엘리먼트 별로 할당을 해주는 것이다
왜냐하면 key에 인덱스를 사용할 경우 성능이 저하되거나 컴포넌트의 state와 관련된 문제가
발생할 수 있다.

아래의 코드 확인!

<div className="main_content_left">
     <div className="content_story">
       {storyArr.map((story, index) => {
         return <Story storyData={story} key={index} />;
       })}
       <button className="testgo">&gt;</button>
       <i className="fas fa-angle-right"></i>
     </div>
     {peedArr.map((peed, index) => {
       return <Peed peedData={peed} key={index} />;
     })}
</div>

나의 경우 많은 데이터와 복잡한 로직이 구성되어 있는것이 아니여서 map함수를 돌릴때
두번째 인자로 index를 넣어 슈슈슉 해결했다