js 비동기 처리에 대한 문제가 있습니다

Question

안녕하세요 선배님 ! 자주 질문을 올리는 것 같아 최대한 혼자서 해결해보려고 했지만 계속 한계에 부딪혀서 이렇게 질문 올립니다..제가 구현하고 싶은 것은 tempList 값을 clothesList로 보내 fireStore에 해당 collection을 가져오는 것입니다.하지만 계속 빈 collection이라고 뜹니다.. 코드는 아래와 같습니다. const temp = Math.round(temperature)-273; const [clothes,getClothes] = useState([]); const tempList = (temp) => { let color = "" switch(true) { case (temp < -3): color = "black" break; case (temp < 4): color = "purple" break; case (temp < 8): color = "indigo" break; case (temp < 11): color = "blue" break; case (temp < 16): color = "green" break; case (temp < 19): color = "yellow" break; case (temp < 22): color = `orange` break; case (temp < 27): color = "red" break; case (temp < 35): color = "red" break; default : ; return color; } return color; } const clothCollection = tempList(temp) console.log(clothCollection) const clothesList = async(cloth) => { console.log(cloth); await fireStore.collection(`${cloth}`) .onSnapshot(snapshot => { const array = snapshot.docs.map(async doc => ({ id:doc.id, ...doc.data(), })); getClothes(array) }) } useEffect(()=> { clothesList(clothCollection) },[clothCollection]) console.log(clothes); const summerClothes = clothes.map(cloth =>

) 저는 이 문제를 비동기 처리 문제라고 생각하고 있습니다.처리되는 순서가 getClothes -> snapshot -> console.log(cloth) 가 되는 것을 보고 비동기 처리를 해야겠다 생각하고 setTimeout 과 promise , async를 써봤지만 계속 빈 컬렉션이라고 뜹니다..혹시나 해서 변수에 컬렉션 이름을 넣고 clothesList에 인자를 넘겨서 연결이 되나 확인을 해봤는데 이렇게 하면 연결이 되는 것을 봐서 제가 코드를 잘못 입력하고 있다는 것을 느낍니다..어떻게 하면 비동기처리를 통해 collection에 연결할 수 있을까요? 도와주시면 감사하겠습니다 !!

캐티 · Accepted Answer

async 다음에 로그를 찍으려고 한다면 await 이 들어가야 하빈다.clothesList 는 비동기 함수이므로 await clothesList() 처럼 완료를 대기 하여야 하저. 이렇게 하면 이 다음에 실행되는 로그 출력이 잘 되빈다.

오예예 · Answer

감사합니다! 말씀해주신대로 응용해서 해결했습니다 !!

js 비동기 처리에 대한 문제가 있습니다

2개의 답변

#callback 목록