리액트에서는 불변성을 지켜야 한다 !
불변성 유지란 ? 초기에 할당한 값 자체를 변경하면 안 되는 것을 의미한다
📍state 값 직접 변경하면 안 되는 이유
state의 값 즉 아래 예시를 봤을 때 number의 값에 4를 추가하고 싶은데 그럴 때 push를 사용하면 절대 안 된다. 물론 추가는 잘 되지만 push의 특징 중 가장 큰 특징은 기존에 있던 원본 데이터에 추가가 되기 때문에 원본 배열 자체를 변경하게 되는 것이다.
이렇게 된다면 문제점은 원본 데이터를 사용하고 있는 다른 파일이나 컴포넌트에게도 문제가 될 수 있다. 원본 데이터가 어디에 사용하고 있는지 일일이 다 기억하지 못하기 때문에 값을 못 바꿔줄뿐더러 무조건 원본 배열은 건드리는 게 아니다.
const [number, setNumber] = useState([1, 2, 3]);
number.push(4)
console.log(number) //1, 2, 3, 4📍setState로 변경해야 하는 이유
위에 코드처럼 state를 직접 수정한다면 리액트는 state 값이 변경 되었다는 것을 감지하지 못할 수도 있다. 그렇기 때문에 상태변화함수인 setState로 변경해줘야 한다. 변경하는 방법의 예시로 배열에 추가하는 방법을 보자면 원본 배열을 건드리지 않고 뒤에 추가만 하는 방법이다. 상태변화함수로 값을 변경하고, 변화한 값을 리액트가 감지하면 정상적으로 리렌더링 되는 것까지 확인해볼 수 있다.
const [number, setNumber] = useState([1, 2, 3]);
setNumber([...number, 4]) // 1, 2, 3, 4 