자바스크립트 Callback관련 조언 부탁드립니다.(앱 제작 중 동기화 문제입니다.)

Question

React-Native로 App을 개발 중입니다. data1을 받아오고 출력하는 것은 Hook과 useEffect로 동기를 잘 맞췄는데 data2를 받아오고자 하는데 아래와 같은 구조에서 data2.map이 동작하지 않습니다. 두개의 axios가 동기가 안맞는것 같습니다 ㅠㅠㅠ 아래와 같은 구조입니다. data1의 내용을 반복적으로 출력하는 중에 data1의 내용을 바탕으로 DB에 요청을해서 data2를 받아오고 data1을 출력하는 View에 data2의 내용을 출력해야 하는상황입니다.data2를 data1과 같이 Hook선언을 하게 되면 첫 return이 무한정 반복되어 오류가 납니다. 어떤식으로 해결할 수 있을까요??function Home({navigation){ const [data1, setData] = useState([]); useEffect(...data1의 axios함수 호출);return( {data1.map((data,index){ let data2; axois.post ......then( data2 = respons).catch(에러 출력...); //data2의 값을 받아옴 return({data} {data2.map((data,index){return({data})} )} ); }

초보자1212 · Answer

data1 은 받아오고 안쓰는거같고data 로 사용하시는데 이거 오타라고 받아들여도 되는건가요? 구조가 data1 를 받아오고 그거로 data2 를 받아와서 렌더링해야하는 문제인가여?

초보자1212 · Answer

일단 동작하지 않는 이유는 간단합니다data2 는 undefined 으로 시작하는데 map 은 Array.prototype 에 달려있는 녀석이니까 undefined 에서 참조하려고하니 안되는건데요data1 을 받아온걸 이용해서 data2 를 fetch 하고 그 결과값으로 렌더링을 하려고하시면 useEffect 내부에서 전부 fetch 를 한 후에 hook 업데이트하고 그거로 렌더링하셔야합니다

초보자1212 · Answer

근본적으로 왜 이슈를 트래킹 못하시는지도 알고 싶으시면이건 리액트의 이해도 문제가 아니라 자바스크립트의 기본 이해도가 낮아서 이슈해결을 못하신 경우에요비동기 처리가 어떻게 이뤄지는지, 나아가서 Promise 가 뭔지 그리고 어떻게 동작하는지를 정확하게 모르시기때문에 발생한 이슈라고 보시면 됩니다

bennp · Answer

&#64;초보자1212님답변 감사합니다. data1은 오타가 맞습니다. 코드가 너무 길어져서 기능하고 싶은 내용만 쓰려고 하다보니까 코드를 명확하게 전달하지 못한것 같습니다. 조언해 주신 내용 바탕으로 다시 도전해 보겠습니다.!!!! 감사합니다~~~

자바스크립트 Callback관련 조언 부탁드립니다.(앱 제작 중 동기화 문제입니다.)

4개의 답변

#callback 목록