[React] Shallow Comparison

어떤 배열을 업데이트한 후, 그걸 화면에 그대로 출력하려고 했는데 계속 안됐다.

새로운 원소를 추가하는건 잘 됐는데, 원소를 삭제하거나 기존 원소의 속성을 바꾸는건 되지 않았다.

그 이유는 React는 shallow comparsion을 사용하기 때문이다.

아마 객체를 비교할 때 원본 객체가 아닌, 그 복사본을 가지고 비교하는 듯 하다.
새 원소가 추가될 때는 다시 원본 객체의 복사본을 생성하지만,
삭제하거나 수정할 때는 기존의 레퍼런스를 그대로 사용하기 때문에 새로운 값이 화면에 나타나지 않는다.

아래 코드와 같이

새로운 배열 newnodes를 만든 후 nodes의 값을 그대로 복사해왔다.

그리고 newnodes에서 수정하고 싶은 원소를 삭제한 후, 수정본으로 새 원소를 만들어 다시 삽입해줬다.

        let newnodes=nodes.slice();
        newnodes.splice(ClickedNodeIndex,1);
        newnodes.push(newnode);
        setNodes(newnodes);

빠작