비동기 처리 in react

비동기: 요청 보내고 딴거 하다 응답오면 대답, 동기: 요청 보내고 기다리기.

 

page이동 없이 데이터를 주고 받기 위해 주로 비동기 요청이 쓰입니다.(axios, xhr, fetch....)

오늘은 axios를 이용하는 두 형태를 보려 합니다.

 

#callback함수 이용시

axios.post(url, data, {
            headers: {
              "Content-Type": `application/json`,
            },
          })
          .then((res)=> {
            console.log(res);
          })
          
          console.log("응답 왔나요?") // 응답이 늦으면 "응답 왔나요?" 가 먼저 실행됩니다

 

응답에 대해 처리 하기 위해  callback함수를 이용한 형태입니다.

 

 

그런데 종종 res 값을 변수에 넣고 코드를 이어가고 싶을때가 있습니다. 이를 변수담기라 하겠습니다.

 

 

#변수담기

async () =>  {
let res = await axios.post(url, data, {
            headers: {
              "Content-Type": `application/json`,
            },
          })
      
          
           console.log(res)
          console.log("응답 왔나요?") // res가 실행되고 "응답 왔나요?" 가  실행됩니다
}

 

axios에 대한 값을 res에 담고, await을 통해 res -> "응답 왔나요?" 가 실행되게끔 합니다.( async await처리를 하지 않으면 undefined으로 뜨니 주의하세요!)

 

 

 

요약:

@ 비동기 처리에는 콜백함수, 변수에 담는 형식이 있다. 

@ 변수에 담을경우 async await처리로 undefined을 피합니다.

 

끝!

 

 

코드 보기가 어려우시면 이 링크를 참주해주세요: https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-in-react-22bafd59cb83