setChatId(targetChatId);
console.log("2:",chatId)
console.log("3:",targetChatId)
Q. 왜 2번과 3번의 값이 다르게 찍혀요?
A. 이 현상은 React의 상태 설정 및 리렌더링 메커니즘과 관련이 있습니다.
React의 useState 훅에서 제공되는 set 함수 (예: setChatId)는 비동기적으로 동작합니다. 즉, setChatId를 호출한 직후에 chatId의 값이 바로 업데이트되지 않습니다. 대신, 상태 업데이트가 예약되고(Que로 쌓인다), 컴포넌트는 나중에 리렌더링됩니다.
위의 코드에서:
setChatId(targetChatId);를 호출하면 chatId 상태의 업데이트가 예약됩니다.
그러나 바로 다음 줄의 console.log("2:", chatId)에서는 아직 상태가 업데이트되지 않았기 때문에 이전 값이 출력됩니다.
console.log("3:", targetChatId)에서는 targetChatId 변수의 현재 값이 출력되므로, 여러분이 설정하려고 했던 값이 출력됩니다.
이러한 비동기적인 상태 업데이트의 특성 때문에 상태가 실제로 언제 업데이트되는지 확인하려면 효과 (useEffect) 내에서 확인하는 것이 좋습니다. 예를 들면:
useEffect(() => {
console.log("Updated chatId:", chatId);
}, [chatId]);
이 useEffect는 chatId 값이 변경될 때마다 실행되므로, 실제로 상태가 언제 업데이트되는지 확인할 수 있습니다.