[RN] use 함수

‍서산·2023년 9월 2일
0
        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 값이 변경될 때마다 실행되므로, 실제로 상태가 언제 업데이트되는지 확인할 수 있습니다.

0개의 댓글