리액트가 컴포넌트의 변화를 감지해야 렌더링을 시킬 수 있는데
리액트가 컴포넌트를 감지하는 방법을 이해하지 못하고 리액트에서 권장하는 방법에 맞춰 사용하지 않으면 리액트가 변화를 감지하지 못할 수 있다.
값이 변경 되었다는걸 판단하기 위해 리액트는 객체로 저장된 state를 비교 연산한다.
객체 비교시 판단 근거는 다음과 같다.
원시값 (Primitive Values)
원시값(숫자, 문자열, 불리언 등)은 값 자체가 변경되었는지를 비교
이 값 자체의 비교는 사실상 메모리 주소가 아닌 값의 변화를 직접 비교하는 것이다. 예를 들어, useState로 관리되는 숫자가 1에서 2로 변경되면 리액트는 이 변화를 감지하고 컴포넌트를 다시 렌더링한다.
객체값 (Object Values)
객체, 배열, 함수 등 객체값은 참조(reference)를 비교
이는 얕은 비교(shallow comparison)를 사용하며, 객체의 메모리 주소(참조)가 변경되었는지를 확인한다.
객체 내부의 속성이 변경되었더라도 새로운 객체를 생성하지 않는 한 참조는 동일하게 유지된다. 따라서 리액트가 변화를 감지하지 못한다.
map, filter, spread 문법을 사용해서 새로운 배열을 반환하라는 이유
React의 렌더링 결정
리액트는 컴포넌트의 props와 state가 변경될 때마다 컴포넌트를 다시 렌더링한다.
이 변경은 원시값일 경우 값 자체의 변화, 객체값일 경우 참조의 변화를 통해 결정된다.
상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하려면 setState를 사용해야 한다.
요약
- 원시값: 값 자체를 비교하여 변화를 감지.
- 객체값: 참조(메모리 주소)를 비교하여 변화를 감지.
결론적으로, 리액트는 props와 state의 변화를 감지하여 컴포넌트를 다시 렌더링한다. 이 때 원시값은 값 자체의 변화를, 객체값은 참조의 변화를 통해 감지한다.
