React - State의 불변성

State의 불변성

불변성이란, 변하지 않는 성질을 뜻한다.
즉, 불변성을 유지해야 한다는 말은 초기에 할당한 값 자체를 변경하면 안된다는 것!
useState(초기값)에서 초기값을 setState가 아닌 방법으로 변경하면 안된다는 것이다.

State의 불변성을 유지하는 방법

setState을 활용하면 된다!
setState 함수를 활용하면 인수로 새로운 값을 할당하기 때문에 이전 객체와는 다른 참조 주소를 가지고 있다.
때문에 리액트는 이전 state와 새로운 state를 다른 참조 주소로 인식해 값을 올바르게 변경해준다.

예시)

const arr = [1,2,3]
const [value,setValue] = useState(arr)

setValue([...value,4])

스프레드 연산자를 사용해 해당 배열의 값을 꺼내 새로운 배열의 값으로 할당해주면 된다.
새로운 배열에 이전 state값을 꺼내고 추가로 할당하고 싶은 값을 넣어준 후 새로운 배열을 할당해주면 불변성을 유지해 값의 변화를 감지하게 할 수 있다.

=> state가 불변성을 유지하기 위해서는 항상 새로운 객체를 생성하고 이전 state값을 복사한 후 변경된 값을 setState의 인수로 할당하면 된다!!