20221111 TIL 리액트는 언제 리렌더링을 할까?

리액트를 사용할 때는 어떨 때 리액트가 리렌더링을 하는지 명확히 알고 있어야 우리가 원하는 UI를 제대로 만들 수 있다.
리액트에서는 props나 상태가 변경되었을 때 리렌더링이 일어난다.
그런데 '변경'을 리액트는 어떻게 인지할까?
리액트는 기존값과 현재 값을 Object.is()로 false인지 확인해서 변경이 되었는지 검사한다.

Object.is()는 아래와 경우들에 true를 반환한다.
1. 두 값이 모두 undefined인 경우
2. 두 값이 모두 null인 경우
3. 두 값이 모두 true인 경우
4. 두 값이 모두 false인 경우
5. 두 값이 모두 문자들을 동일한 순서로 가진 동일한 길이의 문자열인 경우
6. 두 값이 모두 +0인 경우
7. 두 값이 모두 -0인 겅우
8. 두 값이 모두 NaN인 경우
9. 두 값이 모두 숫자이고 +0, -0, NaN이 아니고, 같은 값을 지닌 경우
10. 메모리 상 같은 주소를 가리키는 객체인 경우

https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.freecodecamp.org%2Fnews%2Fcontent%2Fimages%2Fsize%2Fw2000%2F2019%2F10%2Fo60oxupyz8cfce0cknvz.png&imgrefurl=https%3A%2F%2Fwww.freecodecamp.org%2Fnews%2Flearn-react-by-building-a-meme-generator%2F&tbnid=4uzPoueGUdqaEM&vet=1&docid=hF6iX6SKyxpIkM&w=1080&h=638&hl=ko-KR&source=sh%2Fx%2Fim

위 경우들 중에 가장 주의를 기울여야할 부분은 10번이다.
Object.is() 로 이전 값과 비교해서 true인 경우 리렌더링이 일어나지 않는다.
객체의 속성을 바꾼다고 객체의 메모리 상 주소가 바뀌지 않는다.
따라서 객체인 state의 속성만 바꿔서 state자체를 setState에 넣는다면 객체의 메모리상 주소가 이전과 동일하므로 리액트는 변경되지 않았다고 판단하여 리렌더링을 하지 않는다.
새로운 객체로 setState을 해야 원하는 대로 리렌더링이 되는 것을 확인할 수 있다.

리액트를 쓸 때 불변성을 지키는 게 중요하다고 해서 그 이유는 제대로 모른 채로 let을 쓰지 않고, 기존 값을 변경시키지 않는 방식으로 코딩했었는데,
불변성을 지켜야 하는 중요한 이유를 한 가지 알게 되었다.
기존 값을 변경하지 않는 불변성을 지키는 방식으로 코딩을 해야 리렌더링을 예상대로 발생시킬 수 있다.

앞으로는 어떤 방식이 좋다고 할 때 그 방식을 무작정 따르기보다는 그 방식을 따르는 게 좋은 이유도 함께 찾아보자!