setState는 기존의 state를 복사해 새롭게 state를 갱신 -> 객체의 불변성을 지킬 수 있음 -> 오류들을 미리 방지할 수 있음.
예를 들면 불변성을 유지하지 않고 임의로 state를 변경하면 리액트가 상태 변경을 알아채지 못해 컴포넌트가 불필요하게 재렌더링되거나 혹은 이전 상태와 현태 상태를 리액트가 비교하지 못해 변경된 상태를 UI에 반영하지 못함.
따라서 아래와 같은 방식으로 불변성을 지키면서 값을 변경해야 함
예시const [item, setItem] = useState(['apple', 'banana', 'orange'])라는 배열을 가진 state가 있다고 가정함
여기에 'peach'를 추가한다고 했을 때 item.push('peach')를 한다면 직접 변경을 하는 것이기 때문에 리액트는 item 배열의 변화를 알지 못함(변경을 할 때는 setState를 사용해 이전 상태와는 별개의 새로운 상태를 생성하기 때문(그러니까 똑같이 생겼는데 메모리 주소값을 다르게해서 새로운 상태를 만듦))
따라서 불변성을 유지하면서 상태를 변경하려면 리액트에서는 다음과 같이 할 수 있음
setItem([...item, 'peach'])
스프레드 연산자를 사용해 기존 item의 요소들을 새로운 배열에 복사 후 'peach'라는 새로운 요소를 새로운 배열에 추가함. 그러면 기존 item배열은 변하지 않고 기존의 item 배열과는 별개의 새로운 배열이 생성되어 state가 업데이트 됨
React에서 State의 불변성 유지
state의 불변성 유지 방법
setState는 기존의 state를 복사해 새롭게 state를 갱신 -> 객체의 불변성을 지킬 수 있음 -> 오류들을 미리 방지할 수 있음. 예를 들면 불변성을 유지하지 않고 임의로 state를 변경하면 리액트가 상태 변경을 알아채지 못해 컴포넌트가 불필요하게 재렌더링되거나 혹은 이전 상태와 현태 상태를 리액트가 비교하지 못해 변경된 상태를 UI에 반영하지 못함. 따라서 아래와 같은 방식으로 불변성을 지키면서 값을 변경해야 함
예시
const [item, setItem] = useState(['apple', 'banana', 'orange'])라는 배열을 가진 state가 있다고 가정함 여기에 'peach'를 추가한다고 했을 때 item.push('peach')를 한다면 직접 변경을 하는 것이기 때문에 리액트는 item 배열의 변화를 알지 못함(변경을 할 때는 setState를 사용해 이전 상태와는 별개의 새로운 상태를 생성하기 때문(그러니까 똑같이 생겼는데 메모리 주소값을 다르게해서 새로운 상태를 만듦)) 따라서 불변성을 유지하면서 상태를 변경하려면 리액트에서는 다음과 같이 할 수 있음스프레드 연산자를 사용해 기존 item의 요소들을 새로운 배열에 복사 후 'peach'라는 새로운 요소를 새로운 배열에 추가함. 그러면 기존 item배열은 변하지 않고 기존의 item 배열과는 별개의 새로운 배열이 생성되어 state가 업데이트 됨