State, Rerendering, Shallow Compare

https://github.com/boostcampwm-2021/web09-Duxcord/commit/c0ed2fb9214db122e93d09a033c6ae2a234f1170 client/src/components/Chat/index.tsx의 61-62줄

1. Shallow Compare

object, array의 같고 다름을 비교할 때 attribute를 비교하지 않고 reference만 비교하는 방식

같은 값이 들어있는 object도 reference가 다르면 다르게 인식하며,

다른 값이 들어있는 object도 reference가 같으면 같게 인식한다.

2. Re - Rendering

리렌더링이 발생하는 시점 다섯 가지!

1. state 변경이 있을 때
2. 부모 컴포넌트가 렌더링되어 props가 변경될 때
3. 새로운 props이 들어올 때
4. shouldComponentUpdate에서 true가 반환될 때
5. forceUpdate가 실행될 때

이 때 1,2의 경우 변경이 있다는걸 감지하는 방법은 위의 Shallow Compare이다. 아래는 리액트 공식 문서에서의 설명이다.

더 정확하게는 Object.is 메서드를 사용하여 얕은 비교를 실행한다.

const [todos, setTodos] = useState([])

const updateTodos = (newTodo:string) => {
 	// 1
  setState((prev)=>{
    prev.unshift(newTodo)
    return prev
  })
  // 2
  setState((prev)=>{
    return [...prev, newTodo]
  })
}

1의 경우, 새 state로 설정된 값은 내용이 바뀌었지만 참조가 바뀌지 않았으므로 리렌더링이 일어나지 않는다

2의 경우, 새 state로 설정된 값의 참조가 바뀌었으므로 리렌더링이 일어난다.

setState뿐만 아니라

SWR의 mutate() 또한 data값을 업데이트할 때 Shallow Compare을 사용한다(고 추정된다).

따라서 상태를 update할 때는 같은 참조를 가진 걸로 업데이트하면 안된다!!!

참고 문헌

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is