React는 불변성(Immutability) 원칙을 따릅니다. 즉, 상태(state)를 직접 변경(mutate)하는 대신 새로운 상태 객체를 생성하여 교체하는 방식으로 상태를 관리합니다. 이는 React가 상태 변경을 효율적으로 감지하고, 이를 바탕으로 컴포넌트를 필요한 시점에만 리렌더링 하기 위함입니다.
스프레드 연산자를 사용하여 배열을 복사하는 것(let copy = [...따봉];)은 이 불변성 원칙을 따르는 방법 중 하나입니다. 이렇게 하면 copy는 따봉의 값을 가진 새로운 배열이며, 따봉 배열에 영향을 주지 않고 copy 배열을 변경할 수 있습니다. 이 변경된 copy 배열을 따봉변경(copy)로 상태를 업데이트하면, React는 이전 상태와 새로운 상태가 서로 다르다고 판단하여 컴포넌트를 리렌더링 합니다.
반대로, let copy = 따봉;처럼 참조를 통해 복사하면, copy와 따봉은 같은 메모리 주소를 가리키는 동일한 배열이 됩니다. 따라서 copy를 변경하면 따봉도 함께 변경되고, 이를 따봉변경(copy)로 상태를 업데이트해도 React는 이전 상태와 새로운 상태가 동일하다고 판단하여 컴포넌트를 리렌더링 하지 않습니다. 이는 원치 않는 결과를 초래할 수 있습니다.
굳이 copy해서 들고오지 않는다면 이전상태와 동일하다고 여겨서 리렌더링을 하지않음.
💕setTitle(title)를 호출했을 때, title 변수가 가리키는 배열의 참조가 변경되지 않았기 때문에 React는 이전 상태와 새로운 상태가 동일하다고 판단합니다. 따라서 리렌더링을 하지 않게 됩니다.
<button onClick={ () => {
title.unshift(입력값);
setTitle(title);
console.log(title);
}}>글발행</button>
이렇게 코드를 돌렸더니 정말로
title에 입력값이 반영은 되지만.. 참조하는 대상은 변동되지 않았기에...
React가 리렌더링하지 않아서 화면에 변화가 일어나지 않음.
copy를 통해서 참조하는 대상을 바꿔줬기 때문에 한번 더 리렌더링 실시함.
콘솔값은 둘다 잘 반영되서 나오는 것을 알 수 있음.
<button onClick={ () => {
let copy = [...title];
copy.unshift(입력값);
setTitle(copy);
console.log(copy);
}}>글발행</button>
