객체 불변성 / 얕은 복사 / 깊은 복사

바뀌기 전 코드

plusBtn = e => {
    const { items } = this.state;
    const changeList = [...items];
    changeList.map(el => {
      if (Number(e.target.name) === el.id) {
        el.quantity = el.quantity + 1;
      }
    });

위의 코드는 플러스버튼을 클릭하면 클릭한 곳의 숫자가 1씩 늘어나는 아주 단순한 함수이다.

위의 코드에서 내가 지적받은 부분은 바로 객체 불변성에 대해서였다.
어디선가 들어본 객체 불변성을 위해 객체를 복사하긴 했지만 얕은 복사를 한 객체 내부 요소를 바꾸는 것이 아니라 실제로는 직접 state를 바꾼 모양이 되어버렸다.

코드리뷰를 받은 후 코드

  plusBtn = e => {
    const { items } = this.state;
   
    const changeList = items.map(item => {
      if (Number(e.target.name) === item.id) {
        return { ...item, quantity: el.quantity + 1 }
      } else {
        return item
      }
    });

이것이 코드리뷰를 받은 후 변화된 코드!
state를 직접 바꾼 것이 아닌 객체 내부의 요소만 바꾸기 위해 spread 연산자를 이용했다.
이렇게 함으로써 직접 state를 변경하는 것이 아닌 내부 요소만 변경되어 객체 불변성을 지킬 수 있었다.

평소 spread 연산자라던가 객체 불변성에 대해 제대로 알지 못했는데 이번 기회를 통해 제대로 공부할 수 있게 되었다.
2차 프로젝트때는 리뷰를 받기 전에 꼭 내가 먼저 제대로 써보도록 하자.