[개념] 리액트가 컴포넌트를 감지하는 방법 - 컴포넌트의 값 변경하기

리액트가 컴포넌트의 변화를 감지해야 렌더링을 시킬 수 있는데
리액트가 컴포넌트를 감지하는 방법을 이해하지 못하고 리액트에서 권장하는 방법에 맞춰 사용하지 않으면
리액트가 변화를 감지하지 못할 수 있습니다.

1. setState로만 값을 변경해줘야 하는 이유 = 불변성을 유지해야 하는 이유

값이 변경 되었다는걸 판단하기 위해 리액트는 객체로 저장된 state를 비교 연산합니다.
객체 비교시 판단 근거는 객체의 메모리 주소인데 직접 값을 수정하면 메모리 주소가 동일하여 리액트는 변화를 감지하지 못합니다. 상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하려면 setState를 사용해야 합니다. map, filter, spread 문법을 사용해서 새로운 배열을 반환하라는 이유도 그것때문입니다.

2. react에서 props로 key를 넘겨줘야 하는 이유

고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애줍니다.