[리액트] State

state란?

state(상태) 는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하는 객체다.
컴포넌트의 state가 변경되면 해당 컴포넌트가 자동으로 리렌더링된다.

💡 리렌더링( rerendering )
state나 props가 변경될 때, 리액트가 컴포넌트를 다시 그림

 

리액트에서는 useState() 훅을 사용하여 state를 생성하고 업데이트할 수 있다.

💡props와 state의 차이
props : 부모 → 자식으로 전달되는 변경 불가능한(Read-only) 데이터
state : 컴포넌트 내부에서 관리하는 변경 가능한 데이터

---

state의 특징

 

• state가 변경되면 리렌더링이 발생한다.
  • state를 변경하면 React가 자동으로 해당 컴포넌트를 리렌더링하여 UI를 업데이트한다.

💡 리렌더링( rerendering )
state나 props가 변경될 때, 리액트가 컴포넌트를 다시 그림  

• state는 비동기적으로 업데이트된다.
  • state는 비동기적으로 업데이트되므로 즉시 변경되지 않는다.
  • 여러 개의 state 업데이트가 동시에 발생하면 React는 이를 최적화하여 한 번에 처리할 수 있다.

비동기적? 코드가 즉시 실행되지 않고, 특정 작업이 끝난 후 실행되는 방식

• state는 직접 수정하면 안 된다.
  • state를 직접 변경하면 React가 변경을 감지하지 못하고 리렌더링이 발생하지 않는다.
  • 반드시 setState() (클래스형 컴포넌트) 또는 useState()의 setter 함수를 사용해야 한다.
• state는 불변성을 유지해야 한다.
  • React의 상태 변경은 기존 상태를 직접 수정하는 것이 아니라 새로운 상태를 만들어 교체하는 방식으로 이루어진다.
  • 예를 들어, 배열이나 객체를 업데이트할 때 기존 데이터를 변경하는 것이 아니라 새로운 배열이나 객체를 생성해야 한다.

---

이전 state 값을 이용한 업데이트 (setState(prev => newState))

• state가 이전 값을 기반으로 업데이트되어야 한다면, prevState를 활용하는 것이 좋다

const [count, setCount] = useState(0);

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

 

---

궁금한 점 : 리렌더링이 곧 업데이트인가?

업데이트	실제 화면이 바뀌는 것	가상 DOM과 실제 DOM을 비교 후, 변경된 부분만 업데이트
리렌더링	컴포넌트를 다시 실행하고 가상 DOM을 비교하는 과정	state 변경 시 컴포넌트가 다시 실행됨

 

리렌더링은 컴포넌트를 다시 실행하는 것

리렌더링이 일어나도 state 값이 그대로면 화면 업데이트는 발생하지 않음!

업데이트는 실제로 화면이 바뀌는 것.