리액트의 State 관리와 참조형 데이터 업데이트 방법

1. 단순 자료형 (숫자)의 경우

// 단순 자료형의 state 변화
const [num, setNum] = useState(1);
setNum(2); // num이 1에서 2로 변경됨

단순 자료형인 숫자의 경우, 값이 변할 때 새로운 메모리 주소를 참조하게 된다. 그래서 리액트는 num이 변했다고 인식하고 화면을 다시 렌더링한다.

2. 참조형 자료형 (배열)의 문제점

// 참조형 자료형의 state 변화 문제
const [numbers, setNumbers] = useState([1, 2, 3]);
numbers.push(4); // numbers = [1, 2, 3, 4]
setNumbers(numbers); // numbers의 주소는 그대로 → 리액트는 변화 감지 X
참조형 자료형인 배열에서 값을 추가할 때, 메모리 주소는 바뀌지 않는다. 리액트는 메모리 주소가 변해야만 state 변화를 감지하기 때문에, 위와 같은 코드는 화면 업데이트가 발생하지 않는다.

3. 참조형 자료형의 올바른 사용법

// 참조형 자료형의 state를 업데이트하는 올바른 방법
const [numbers, setNumbers] = useState([1, 2, 3]);

const addNumber = () => {
  const newNumbers = [...numbers, 4]; // 기존 배열을 복사한 뒤 새로운 값을 추가
  setNumbers(newNumbers); // 새로운 배열로 업데이트
};

위 코드에서는 배열을 복사하여 새로운 배열을 만들고, setNumbers를 통해 새로운 주소를 리액트에 전달한다. 이로 인해 리액트는 state가 변했다고 인식하고 화면을 다시 렌더링한다.

정리
리액트는 state의 주소가 바뀌어야만 state 변화를 인식한다.
단순 자료형은 값이 바뀌면 새로운 주소를 참조하게 된다.
참조형 자료형은 값이 바뀌어도 주소가 변하지 않을 수 있으므로, 새로운 데이터를 만들어 업데이트해야 한다.