불변성은 메모리 영역에서 값이 변하지 않는다는 의미이다. 리액트에서 불변성이 중요한 이유는 리액트의 상태 업데이트를 하는 원리 때문이다.
리액트의 상태 업데이트는 배열이나 객체의 속성을 하나씩 비교하지 않고 참조값을 비교하는 얕은 비교를 수행한다. 그래서 배열과 객체 업데이트는 새로운 참조값을 가진 배열이나 객체를 생성하는 것이다.
setState([...state, newState]);
setState({ ...state, [key]: value });이러한 불변성을 통해 리액트는 상태변화를 감지하는 것과 동시에 다음의 이점을 얻는다.
-
사이드 이펙트 방지: 원본데이터를 함부로 변경하는 것은 위험하다. 복사본을 만들어 사용하기에 예상치 못한 오류를 방지할 수 있다.
-
효율적인 상태 업데이트: 깊은 비교가 아닌 얕은 비교로 계산 리소스 감소
setState를 이용할 때 원시타입 경우에는 값을 바로 넣어주어도 되지만 참조타입인 경우에는 새로운 객체나 배열을 생성한 후 값을 넣어주어야 한다.
이를 위해 spread operator, map, filter, slice, reduce 등등 새로운 배열을 반환하는 메소드들을 활용한다. (splice는 원본데이터를 바꾼다.)
// 원시타입
const [number, setNumber] = useState(0);
setState(3);
// 참조타입
const [person, setPerson] = useState({ name: "", age: 30 });
setState({ ...person, name: "pyo" });