Vue.js에서 AJAX 요청을 보내는 방법은 무엇인가요?

Q1: Vue.js에서 AJAX 요청을 보낼 때 어떤 방법을 사용할 수 있나요?
A1: Vue.js 자체는 AJAX 기능을 내장하고 있지 않으므로, 일반적으로 다음 방법을 사용합니다.
- `axios` 라이브러리 사용 (가장 인기 있음)
- 브라우저 내장 `fetch` API 사용
- `vue-resource` 같은 외부 Vue 전용 라이브러리 사용 (현재는 권장하지 않음)

---

Q2: axios를 Vue.js에서 어떻게 사용하나요?
A2:
1. axios 설치:
```bash
npm install axios
```
2. Vue 컴포넌트에서 import 후 사용:
```js
import axios from 'axios';

export default {
data() {
return {
info: null,
error: null
};
},
methods: {
fetchData() {
axios.get('https://api.example.com/data')
.then(response => {
this.info = response.data;
})
.catch(error => {
this.error = error.message;
});
}
},
mounted() {
this.fetchData();
}
}
```
3. 이렇게 하면 컴포넌트가 마운트되면서 AJAX 요청이 실행되고 결과가 `info` 데이터에 저장됩니다.

---

Q3: fetch API를 Vue.js에서 사용하는 예시는?
A3:
```js
export default {
data() {
return {
info: null,
error: null
};
},
methods: {
fetchData() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) throw new Error('네트워크 오류');
return response.json();
})
.then(data => {
this.info = data;
})
.catch(error => {
this.error = error.message;
});
}
},
mounted() { this.fetchData();
}
}
```

---

Q4: AJAX 요청 시 Vue의 반응성 문제를 주의해야 하나요?
A4:
네, AJAX를 통해 가져온 데이터를 반응형 객체(예: `data` 속성) 안에 저장해야 Vue가 변경 사항을 추적하고 UI를 자동으로 갱신합니다.
즉, `this.info = response.data` 와 같이 데이터 속성을 직접 업데이트하는 방식이 권장됩니다.

---

Q5: AJAX 요청의 결과를 전역 상태 관리(Vuex)와 연동할 수 있나요?
A5:
네, Vuex 액션 안에서 axios나 fetch 호출 후, 결과를 mutation을 통해 상태에 반영할 수 있습니다.
예:
```js
actions: {
fetchData({ commit }) {
axios.get('/api/data')
.then(response => commit('setData', response.data))
.catch(error => commit('setError', error));
}
}
```

---

Q6: 비동기 요청 상태(로딩, 성공, 실패)를 처리하는 방법은?
A6:
`data`에 `isLoading`과 `error` 상태를 두고 아래처럼 처리합니다.
```js
data() {
return {
info: null,
isLoading: false,
error: null
};
},
methods: {
fetchData() {
this.isLoading = true;
this.error = null;
axios.get('/api/data')
.then(response => {
this.info = response.data;
})
.catch(err => {
this.error = err.message;
})
.finally(() => {
this.isLoading = false;
});
}
}
```

---

Q7: 예제를 통한 Vue.js + axios AJAX 기본 흐름 요약
- axios 설치 및 import
- `data`에 결과 및 상태 변수 설정
- `mounted` 라이프사이클 훅 또는 사용자 이벤트에서 요청 실행
- `.then`으로 성공 시 데이터 처리
- `.catch`로 에러 처리
- `data` 변경 시 Vue가 자동으로 UI 갱신

---

이처럼 Vue.js에서 AJAX 요청은 외부 라이브러리(주로 axios)나 내장 fetch API를 활용하며, 요청 결과를 `data`에 반영하여 Vue의 반응형 시스템을 통해 UI에 즉시 반영하는 것이 핵심입니다.

Vue.j<a href='https://sangseek.com/sangseeks/s./ko'>s.</a>