[React] setState의 속성 ⭐️

Q. 안녕하세요? 리액트 setState 관련 질문드립니다. 이전값을 기초로 state을 업데이트할 때 setState(curr =>{const newState={...curr}; delete newState.notifications[id]; return newState }) 이렇게 리턴값에 새로운 state를 전달해야한다고 그동안 알고 있었습니다. 그런데 아래 예시처럼 바로 newState = delete ~~ 해버리면 true가 리턴되고 setState 안에서 return true로 해도 아주 잘 작동합니다.... 저는 저런형식에서 return에 새로운 state를 명시해야 되는지 알았는데 아니네요... 어떻게 이해를 하면 될까요??

A. 클래스 컴포넌트의 setState는 내부 구조상 Object.assign을 통해 값을 갱신해게 됩니다,
이 때, 기존의 값에 전달된 값을 합침으로써 새로은 값을 갱신하는데, 함수내부의 Updater 가 true를 반환하기 때문에, Object.assign({}, preState, newState)
Object.assign({}, preState, true)
==> preState가 반환되게 됩니다.
이때 정상적으로 데이터가 삭제된 이유는, 내부에 있는 업데이터 함수(newState)를 setState 내부에서 호출하기 때문에 그 안에서, delete 키워드가 실행되어 preState가 변경된 것이라고 생각하시면 됩니다.
setState 자제가 이뮤터블하게 값을 리턴하여 갱신하기 때문에, 문제없이 동작하지만, 이런 방식은 사이드 이펙트 혹은 불안정성을 증가 시킬 수 있기 때문에, 상태값의 내부 값을 변경하실 때는
삭제시
filter를 이용하거나, deepcopy를 이용하여 주시는 것을 추천 드립니다.
list.filter(v => v.id !== id) //새로은 배열 반환

• this.setState((curr)=>({count:curr.count+1})) 이런식으로 setState안에는 콜백함수가 들어가야한다. 직접 state를 변경하는 것이 더 직관적이지만(에러는 안남) 이전state값을 사용할 수 없는 경우가 있다.(비동기적처리의 경우) 이전값에 계산을 더하는 경우.

• 리액트 li update 시, data structure : array
  1. 추가 : [...this.state.array, {추가}]

  2. 수정 : map
  3. 삭제 : filter
     // habit-tracker 예제 참조

• data structure : object(hash table)
  1. 추가, 수정 :
  const updated = { ...curr };
  updated[card.id] = card;
  return updated; (setState 안에서)

  2. 삭제 :
     const updated = { ...curr };
     delete updated[card.id];
     return updated;(setState 안에서)

** setState 바깥에서 정의하는 경우.
this._deleteNotification = (id) => {
  const updated = { ...this.state.notifications };     delete updated[id];
  this.setState({ notifications: updated });
    };

** setState가 비동기인 이유 ? setState할 때마다 렌더링이 일어나게 되는데 여러개의 setState를 모아 한번에 처리하여 렌더링을 최소화하려고 리액트에서 setState를 비동기로 만듦.