리액트에서 state에 배열을 넣어둔다면, setter로 배열의 요소를 수정하면 변경됐다고 생각하지 않아? 그냥 아예 배열을 새로 얕은복사하고 setter함수로 새로 배열을 넣어주어야 변경되었다고 감지하는 거야?
왜 꼭 setter함수를 [...state]로 수정해야할까에 대한 의문점이 들었는데, 그이유는 리액트는 렌더링이전의 state와 렌더링된 state를 비교할 때, 같은 주소값을 가르키고 있는지에 따라 구분을 한다는 것이다. 예를들어 아래와 같이 state를 정의했다고 해보자.
const [state, setState] = useState([1,2,3,4,5]);
function example(){
const copy = state;
setState(copy);
}
그러면 위의 예제에서 example 함수가 실행되더라도 렌더링 되지 않을 것이다. 왜냠믄~~ 배열이 같은 주소값을 가리키고 잇응깨~
따라서 spread 문법이나 slice() 메서드, concat를 사용해서 새로운 배열을 만들고 setter함수로 state를 수정하라는 것이엇다.