React, async await 동기화 관련해서 질문 드립니다.

Question

안녕하세요. 유저정보를 불러와 작업을 하려고 하는데 동기화를 하지 못해 고민이 있습니다. https://www.mecallapi.com/api/users 라는 api사이트를 이용해서 테스트하고 있습니다.Form에서 submit을 누르면 handleSubmit을 실행하여 axios를 이용해 유저 정보를 가져옵니다.async await을 이용해 유저정보를 다 불러올 때까지 기다렸다가 작업할 예정인데 그러지 못해 질문드립니다. const [data, setData] &#61; useState(null); const handleSubmit &#61; async (event) &#61;> { //버튼을 누르면 실행됨. event.preventDefault(); await axios .get(&#34;https://www.mecallapi.com/api/users&#34;) .then((success) &#61;> setData(success.data));//setData를 통해 가져온 정보를 저장 console.log(data); // 처음에는 null, 이후에 데이터가 들어와 있음. }; 제 생각엔 async await을 사용하면, 테스트 사이트에서 유저 정보를 다 불러올 때까지 기다렸다가,console.log(data)를 찍어야 될 거라고 생각하는데, 다 불러오기전에 찍어서 어떻게 처리할지 고민입니다. 버튼을 두 번 누르면 데이터가 들어와 있습니다. 어떻게 동기화할 수 있을까요?

oxo_03 · Accepted Answer

async await, promise 개념에 대해 더 공부하시면 좋을 것 같습니다. async await 사용 방법은 이렇습니다.const [data, setData] &#61; useState(null); const handleSubmit &#61; async (event) &#61;> { event.preventDefault(); const response &#61; await axios.get(&#34;https://www.mecallapi.com/api/users&#34;); setData(response.data)); console.log(data); };

빠른코딩 · Answer

await만 씃고 then은 빼야죵..예시를 다시 확인해보세요

자바개발자튜토리얼중 · Answer

답변 해주셔서 감사합니다. 말씀해주신 방향으로 다시 공부하겠습니다.!

React, async await 동기화 관련해서 질문 드립니다.

3개의 답변

Q&A 목록