객체 State 업데이트하기

1️⃣ State 설정 시 다음 렌더링이 큐에 추가됨

state를 직접 변경하지 말고 복사본을 만들어 설정해야 하며, state 변경은 즉시 UI를 변경하지 않고 다음 렌더링을 예약함.

2️⃣ 렌더링 전 여러 작업 수행 가능

state 업데이트 전에 값을 가공하거나 필요한 작업을 수행할 수 있음.

3️⃣ React의 state 배치 방식 이해 필요

원활한 동작을 위해 state가 어떻게 업데이트되고 렌더링되는지 React의 동작 방식을 이해하는 것이 중요함.

변경이란?

State에는 모든 종류의 자바스크립트 값을 저장할 수 있습니다.

const [x, setX] = useState(0);

지금까지 숫자, 문자열, 불리언을 다루었습니다. 이러한 자바스크립트 값들은 변경할 수 없거나 “읽기 전용”을 의미하는 “불변성”을 가집니다. 값을 교체 하기 위해서는 리렌더링이 필요합니다.

setX(5);

x state는 0에서 5로 바뀌었지만, 숫자 0 자체 는 바뀌지 않았습니다. 숫자, 문자열, 불리언과 같이 자바스크립트에 정의되어 있는 원시 값들은 변경할 수 없습니다.

state에 있는 이러한 객체를 생각해보세요.

const [position, setPosition] = useState({ x: 0, y: 0 });

기술적으로 객체 자체 의 내용은 바꿀 수 있습니다. 이것을 변경(mutation)이라고 합니다.

position.x = 5;

하지만 React state의 객체들이 기술적으로 변경 가능할지라도, 숫자, 불리언, 문자열과 같이 불변성을 가진 것처럼 다루어야 합니다. 객체를 변경하는 대신 교체해야 합니다.