[React] React의 setState와 비동기 처리

React에서 useState 를 사용하여 상태(state)를 관리할 때, 간혹 상태 업데이트가 예상대로 이루어지지 않는 상황을 경험할 수 있습니다. 특히, setState 가 비동기적으로 동작하는 점을 이해하는 것이 중요합니다. 이번 글에서는 이와 관련된 문제와 해결 방법에 대해 다루어 보겠습니다. 문제 상황 아래 코드는 useState 를 사용하여 상태를 업데이트하고, 업데이트된 상태를 기반으로 API 호출을 시도하는 예제입니다. const [a, setA] = useState(null); const settingA = () => { setA(1); callAPI(); } const callAPI = () => { console.log(a); } callAPI(); 여기서 settingA 함수가 호출되면, 상태 a 가 1 로 업데이트되고, callAPI 함수가 호출되어 콘솔에 a 의 값을 출력할 것으로 예상할 수 있습니다. 하지만 실제로 콘솔에 찍히는 값은 null 입니다. 왜 그럴까요? 원인 분석 setState 는 비동기적으로 동작합니다. 즉, setA(1) 이 호출되더라도 즉시 상태가 업데이트되지 않으며, 리렌더링 이후에야 새로운 상태 값이 반영됩니다. 따라서 setA 를 호출한 직후 callAPI 를 호출하면 여전히 이전 상태 값을 참조하게 됩니다. 해결 방법 상태 업데이트 후 특정 작업을 수행하려면 useEffect 훅을 사용하는 것이 좋습니다. 상태 값이 변경될 때마다 그에 따라 필요한 작업을 수행하도록 할 수 있습니다. 다음은 이를 구현한 예제입니다. import React, { useState, useEffect } from 'react'; const MyComponent = () => { const [a, setA] = useState(null); const [isSetA, setIsSetA] = useState(false); const settingA = () => { setA(1); setIsSetA(true); } useEffect(() => { if (isSetA) { callAPI(); } }, [isSetA]); const callAPI = () => { console.log(a); setIsSetA(false); } return ( Set A and Call API ); } export default MyComponent; 개선된 방법 위 코드도 동작하긴 하지만, isSetA 라는 추가적인 상태를 사용하지 않고 더 간단하게 해결할 수 있습니다. useEffect 를 사용하여 상태 a 가 변경될 때마다 callAPI 를 호출하도록 합니다. import React, { useState, useEffect } from 'react'; const MyComponent = () => { const [a, setA] = useState(null); const settingA = () => { setA(1); } useEffect(() => { if (a !== null) { callAPI(); } }, [a]); const callAPI = () => { console.log(a); } return ( Set A and Call API ); } export default MyComponent; 이제 상태 a 가 변경될 때마다 callAPI 가 호출되며, 콘솔에 1 이 출력될 것입니다. 마무리 React에서 상태 관리와 비동기 업데이트는 중요한 개념입니다. setState 가 비동기적으로 동작함을 이해하고, useEffect 를 활용하여 원하는 타이밍에 작업을 수행할 수 있도록 코드를 작성하는 것이 중요합니다. 이 글이 여러분의 개발에 도움이 되었길 바랍니다. 질문이나 더 나은 방법이 있다면 댓글로 공유해주세요! 읽어주셔서 감사합니다.