프로젝트 리팩토링

State를 직접 수정해선 안된다.

1차 프로젝트를 하면서 가장 아쉬웠던 부분은 우리가 리덕스를 배우기 전이라 라우팅되면서 페이지가 바뀔때, 이전 페이지에서 고른 토핑들을 장바구니로 가져갈 수 없다는 거였다.
그래서 결국 커스터마이즈 페이지는 포기할 수 밖에 없었는데, 이제야 시간이 나서 조금씩 다시 뜯어보는 중이다.

내가 구현해야 했던 건 토핑들을 선택하면 옆에 내가 선택한 토핑 옵션들이 바로 보여지고, 선택된 상태의 토핑들을 다시 선택하면 삭제되는 기능이었다.

그러기 위해서는 먼저 아래와 같은 로직이 필요한데,

1. 토핑을 클릭한다
2. 토핑이 리스트에 있는지 없는지 확인한다.
3. 있으면 제거하고 없으면 추가한다

이 로직을 푸느라 1차 프로젝트 당시에 꽤나 고생했었다.
당시에는 급해서 splice를 사용했으나, 오작동되었고,
이제 와서 조금 더 공부를 하면서 보니 state를 직접적으로 수정해서는 안되기 때문에 splice 보다는 새로운 배열을 생성하는 filter 를 사용하는 것이 좋다.
splice 보다 filter가 더 간결해서 좋기도 하다.
아래는 수정한 코드

clickToppings = (addedTopping) => {
    const { addedToppingList } = this.state;

    //선택한 토핑이 이미 존재하면 제거하고
    if (addedToppingList.some((el) => el.id === addedTopping.id)) {
      alert("선택한 토핑을 제거합니다");
      this.setState({
        addedToppingList: addedToppingList.filter(
          (item) => item.id !== addedTopping.id
        ),
      });

      //존재하지 않으면 AddedToppings 에 추가한다.
    } else {
      this.setState({
        addedToppingList: addedToppingList.concat(addedTopping),
      });
    }
  };