배열의 map을 이용하여 모든 원소가 렌더되도록 가능하다. 하지만 이때 key라는 props를 설정해야 하고 각 원소들마다 가지고 있는 고유값으로 key값을 설정한다. 만약 없을 때에는 배열의 index로 key값을 설정하지만 권장하지 않는다.
key값을 설정하는 이유는 경고 메시지가 뜨게 되는데 이유는 각 고유 원소에 key가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문이다.
어떻게 효율적인지는 다음 이미지를 보면된다.
b와 c 사이에 z가 삽입되는 것이 아니라 c가 z로 바뀌고 d는 c가 되고 마지막에 d가 추가된다.
c 이후의 요소들이 바뀌게되면서 연산이 늘어나서 효율적이지 못하다.
이번에는 a를 삭제하면 a는 b가 되고 b는 z가 되고, z는 c가 되고 c는 d가 되고 맨 마지막 d는 제거된다. 배열 전체가 바뀌기 때문에 효율적이지 못하다.
그러면 key가 있을 경우에는 고유값이 있어 원하는 것을 삽입하고 삭제할 수 있다.
배열에 항목 추가하기
불변성 때문에 spread를 사용하거나 새로운 배열을 반환하는 concat을 사용하여 항목을 추가할 수 있다.
배열에 항목 삭제하기
불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서는 filter 배열 내장 함수를 사용하는 것이 가정 편하다.
배열에 항목 수정하기
map, spread, 삼항연산자를 사용하여 특정 배열 요소를 수정가능하다.
