[React] 배열 렌더링하기, map 사용 , key값이 꼭 있어야하는 이유

이제까지 리액트에서 내가 배열을 렌더링할때는 이런 경우이다.

 

• 메인페이지에서 상품 목록을 가지고 올떄

 

위와 같은 페이지에서

상품 하나를 컴포넌트로 만들어서 , 페이지에서 상품 정보를 가지고 있는 배열을 map돌리는 것이다.

 

 {product_list.map((p) => {
                return (
                  <Product key={p.productId} {...p}>
                  </Product>
                );
              })}

 

 

여기서 map을 돌릴때 꼭 key가 있어야한다.

key가 없으면 추가나 삭제가 일어날때 매우 비효율 적인 작업이 일어난다.

예를 들어

[a, b, c, d] 배열에

z를 중간에 넣어 [a, b, z, c, d]로 만들고 싶다면

c가 z로 바뀌고, d가 c로 바뀌고 d가 새로 생긴다.

 

그 후 a를 삭제하고 싶으면

a가 b로 바뀌고 b가 z로 , c가 d로 바뀌고 마지막에 있던 d가 사라진다.

 

하지만 key가 있으면 고유한 값을 가졌기 때문에

z가 그대로 넣어지고 a가 그대로 삭제될 수 있다.

 

보통 key값으로 쓸 것이 없다면 index를 쓰는데 권장하지않는다.

만약에 배열안에 중복되는 key 가 있을 때에는 렌더링시에 오류메시지가 콘솔에 나타나게 되며,

업데이트가 제대로 이루어지지 않게 된다.