React map 적용시 key props를 사용하는 이유

key props를 사용하는 이유

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>

{number}

);

이런 식으로 사용 할 수 있따. key를 선택하는 가장 좋은 방법으로는 리스트의 항목들중 해당 항목을 고유하게 식별할 수 있는 문자열을 사용 하는것이 가장 좋음.

대부분 ID값을 key로 사용한다.

ex) ID값 사용

const todoItems = todos.map((todo) =>

{todo.text}

);

렌더링 한 항목에 대한 ID가 없을 경우 최후의 수단으로 인덱스를 key로 사용 가능하다.

ex)

const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs

{todo.text}

);

이는 최후의 방법이며 항목의 순서가 바뀔 수 있는 경우엔 key에 인덱스를 사용하는 것을 권하지 않는다. 성능 저하나 컴포넌트의 state와 관련된 문제가 발생될 수 있음.

key 사용의 예

{sales.map((a, i) => {
return <Card sales={sales[i]} i={i + 2} key={i} />;
})}

              function Card(props) {

return (

<div className="col-md-4">
  <img
    src={require('./img/beslow' + props.i + '.jpeg')}
    alt=""
    width="80%"
    className="first_items"
  />
  <h5>{props.sales.title}</h5>
  <p>{props.sales.price}</p>
</div>

);
}

물론 이는 인덱스 값을 key로 사용한 예로 다른 항목들에서 구별 가능한 ID값으로 변경이 필요하다.