[react] 코드 실행 흐름에 관한 질문(async, await 관련)

Question

아래와 같은 컴포넌트에서 코드의 실행 흐름을 파악하고자 console.log를 찍어봤는데요, const NewsList = () => { const [articles, setArticles] = useState(null); const [loading, setLoading] = useState(false); useEffect(() => { // async를 사용하는 함수 선언 const fetchData = async () => { console.log(" ::: (4) fetchData가 호출됨. fetchData 함수 내부 ::: "); setLoading(true); // loading 상태 console.log(" ::: (5) loading 상태 true로 set완료 ! ::: ") try { const response = await axios.get( 'https://newsapi.org/v2/top-headlines?country=kr' ); console.log(" ::: (6) response를 받아오고 setArticles를 해주기 직전 ::: "); setArticles(response.data.articles); console.log(" ::: (7) article set완료 !") } catch (e) { console.log(e); } console.log(" ::: (8) loading 상태 false로 set직전 ! ::: ") setLoading(false); // loading 끝난 상태 } console.log(" ::: (3) fetchData 호출 직전 ::: "); fetchData(); }, []); // loading 상태일때 console.log(" ::: (1) loading상태 파악 ::: "); if (loading) { return 대기 중... } // 아직 articles 값이 설정되지 않았을 때 console.log(" ::: (2) articles 설정여부 파악 ::: "); if (!articles) { return null; } // articles 값이 유효할 때 return ( { articles.map(article => ()) } ); }; 콘솔에는 아래와 같이 로그가 남습니다. 여기서 궁금한것은, (5) loading 상태 true로 set완료! 후에 바로 (1) loading 상태 파악 로그가 뜨는데 Q1. 제가 이해하기로는 axios의 response가 아직 도착하지 않아서 (6)로그는 찍히지 않고 대기중인 상태이고, state(loading)가 변경되었기 때문에 리렌더링이 수행되어져야 하는데, 비동기적인 실행 흐름에 따라 (6)을 대기중인 상태에서 리렌더링을 다시 일으켜 (1) loading 상태 파악 로그가 뜨는거라 이해했는데 맞을까요? Q2. response를 받아 온 후 (7)article set완료 ! 로그가 뜬 시점에서, 제가 이해하기로는 state가 변경되었기 때문에 다시 (1) loading상태 파악 로그가 떠야 맞다고 생각하나, (8) 로그가 먼저 떴습니다. 이는 하나의 프로세스(?)내에서 setState가 여러번 호출되는 경우, 효율최적화를 위해 프로세스가 끝날 시점에 state를 일괄적으로 업데이트 하는 react의 속성에 의해 setLoading(false)가 수행되고(프로세스가 끝나고) 리렌더링이 되기 때문이라 이해하면 되는걸까요? 그렇다면, Q1에서는 왜 response를 기다리는 동안 렌더링을 수행한 걸까요? 아래 setState함수들이 더 있는데 말이죠, 이는 단순히 async 함수 내부의 순서보장을 위해, response가 도착하기 전까지 async함수 내부의 setState는 실행하지않고, 비동기적으로 리렌더링을 실행한거라고 이해하면 되는 걸까요? 두서없는 글을 봐주셔서 감사합니다... 리액트를 이제 막 시작해서 감이 잘 안잡히네요...

으악악 · Accepted Answer

react라기 보다는 자바스크립트 내부 동작과 연관있어 보이네요. async/await는 promise의 syntax sugar 개념이고, promise는 엔진 내부에서 microtask queue에 들어가서 현재 수행하고 있는 call stack과 분리되어 다음 번 call stack에서 실행됩니다. 움짤로 보는 자바스크립트 동작 원리(5) - Promises & Async/Await (tistory.com) 위 링크 참고하시면 의문이 많이 해소되실 거 같네요.

idk112 · Answer

&#64;spinoseo 훌륭한 자료네요. 많은 도움 되었습니다. 정말 감사합니다.

[react] 코드 실행 흐름에 관한 질문(async, await 관련)

2개의 답변

#await 목록