[JS] response, response.data 비동기 함수 응답 처리, axio.get().then((response) => {});

 

axio.get().then((response) => {});

비동기 함수 응답처리에서 사용하는 response(변수)에 대해서 알아보겠다

개념	설명
axios.get()	서버에 데이터 요청
.then((res) => {...})	요청 성공했을 때 실행할 코드
res.data	서버가 보내준 실제 데이터

 

❓ res 

=> 서버에 요청을 보낸 후 서버가 응답한 전체 객체

axios.get('/some-api').then((res) => {
  console.log(res);
});

res 예제) 👇

{
  data: {...},          // 우리가 진짜로 필요한 데이터 (ex: JSON)
  status: 200,          // HTTP 상태 코드 (성공이면 200)
  statusText: "OK",     // 상태 설명
  headers: {...},       // 응답 헤더 정보
  config: {...},        // 요청 보낼 때의 설정들
  request: {...}        // 실제 요청 객체
}

 

 

❓ res.data 

=> 서버가 응답한 전체 객체 중에서 우리가 실제로 쓰는 데이터 부분

 

위에서 반환한 객체의 data json 형태를 res.data가 받아옴

{
  "name": "홍길동",
  "age": 30
}

 

 

 

** 리액트에선 보통 useEffect 안에서 데이터를 요청함