useState() 스케줄링

📌 useState() 훅

• 상태를 관리하는 훅
• 함수 컴포넌트에서 상태를 추가하고 관리할 수 있다.
• useState()는 현재 상태값과 해당 값을 갱신할 수 있는 함수를 반환한다.
• const [enteredDate, setEnteredDate] = useState('');
  setEnteredDate를 통해 상태를 갱신하면, 우리 눈엔 즉각 적용되는 것처럼 보이지만, 실제론 상태 업데이트 스케줄링만 한 상태이다.

 

 

📌 useState() 스케줄링

React는 useState를 통해 상태를 업데이트할 때, 해당 상태 변경을 비동기로 처리하고 일괄적으로 업데이트한다.

 

일반적으로 useState를 호출하여 상태를 업데이트하면, React는 업데이트된 상태를 즉시 반영하지 않고, 대기열에 해당 상태 변경을 넣는다. 대기열에는 여러 상태 변경이 모여있을 수 있고, React는 이 대기열을 처리하여 실제 DOM 업데이트를 수행한다.

 

 

 

📌 useState() 스케줄링의 장점

🌀여러 상태 변경이 한 번의 렌더링으로 처리되어 성능을 향상시킬 수 있다.

예를 들어, 여러 useState 호출이 동일한 렌더링 사이클에서 실행되더라도, React는 이를 하나의 렌더링 작업으로 처리하여 중복된 렌더링을 방지한다.

 

🌀useState() 스케줄링은 배치 업데이트(batch update)라고도 불리는데, 배치 업데이트는 여러 상태 변경을 하나의 작업으로 묶어서 처리하므로, 중간에 발생하는 중간 렌더링을 줄일 수 있어 성능 개선에 도움된다.

 

 

 

📌 useState() 사용 시 주의해야 할 점

useState 스케줄링 때문에 상태 업데이트가 즉시 반영되지 않을 수 있다. 상태 변경 함수를 호출한 이후에도 업데이트된 상태를 바로 읽을 수는 없으며, 다음 렌더링 사이클에서 업데이트된 상태가 반영된다.

 

 

 

📌 상태에 의존적인 작업을 수행해야 한다면? (= 실시간 적용해야 한다면?)

• 업데이트 함수의 매개변수로 함수를 사용한다.
  매개변수로 함수를 사용하면 이전 상태에 의존적인 값을 업데이트할 때 이전 상태의 스냅샷을 사용할 수 있기 때문에 예기치 못한 결과를 방지할 수 있다.
  const [count, setCount] = useState(0);
  
  setCount(count + 1); ❌
  setCount(prevCount => prevCount + 1); ⭕️
  
  
• useEffect 사용
  useEffect는 상태 또는 종속된 값이 변경될 때마다 의존성 매커니즘을 통해 내부에서 선언한 이펙트를 재실행 시킨다. 따라서 컴포넌트 함수가 재실행되고, 컴포넌트가 재실행되므로 매번 이펙트가 다시 실행되기 때문에 미완료 상태 변경 작업이 빠짐 없이 실행된다.

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

useEffect(() => {
	// useEffect 안에서 count를 사용하면 항상 최신 값을 얻을 수 있다.
	// useEffect는 count가 변경될 때마다 실행되어 항상 최신 값을 출력한다.
	console.log(count);
}, [count]);