[javascript] 비동기 데이터 요청에서의 로딩 상태 표시 방법
웹 애플리케이션에서 비동기적으로 데이터를 가져오는 경우에는 일반적으로 사용자에게 로딩 상태를 보여주는 것이 좋습니다. 이를 통해 사용자는 데이터 요청이 처리 중이라는 것을 알 수 있고, 대기하는 동안 화면이 멈춰 있거나 빈 화면을 보지 않게 됩니다.
1. 로딩 상태를 나타내는 UI 구성
로딩 상태를 나타내는 UI는 주로 스피너(로딩 중 아이콘)나 진행률 표시바 등으로 구성됩니다. 이러한 UI 요소들은 사용자에게 데이터가 불러오는 중임을 시각적으로 보여주어 사용자 경험을 향상시킵니다.
2. AJAX 라이브러리 활용
대부분의 AJAX 라이브러리(예: jQuery의 AJAX, Axios 등)는 데이터를 로드하는 동안 로딩 상태를 표시하는 기능을 내장하고 있습니다. 이를 활용하여 간단하게 로딩 상태를 표시할 수 있습니다.
jQuery를 사용한 예시
$.ajax({
url: "data.json",
method: "GET",
beforeSend: function() {
// 로딩 상태 UI 표시
$(".loading-spinner").show();
},
success: function(data) {
// 데이터 로드 완료 후 로딩 상태 UI 숨김
$(".loading-spinner").hide();
// 데이터 처리 로직
},
error: function() {
// 에러 발생 시 로딩 상태 UI 숨김
$(".loading-spinner").hide();
// 에러 처리 로직
}
});
Axios를 사용한 예시
// 로딩 상태를 관리할 변수
let isLoading = false;
// 데이터 요청 함수 정의
async function fetchData() {
try {
isLoading = true;
// 로딩 상태 UI 표시
showLoadingSpinner();
// 데이터 요청
const response = await axios.get('data.json');
// 데이터 로드 완료 후 로딩 상태 UI 숨김
hideLoadingSpinner();
// 데이터 처리 로직
} catch (error) {
// 에러 발생 시 로딩 상태 UI 숨김
hideLoadingSpinner();
// 에러 처리 로직
} finally {
isLoading = false;
}
}
3. 상태 관리 라이브러리 활용
React나 Vue와 같은 프론트엔드 프레임워크에서는 상태 관리 라이브러리(예: Redux, Vuex 등)를 이용하여 로딩 상태를 효과적으로 관리할 수 있습니다. 이를 통해 여러 컴포넌트에서 일관된 방식으로 로딩 상태를 표시하고 관리할 수 있습니다.
// Redux를 사용한 예시
// 액션 정의
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';
// 액션 생성자
const fetchDataRequest = () => ({
type: FETCH_DATA_REQUEST
});
const fetchDataSuccess = (data) => ({
type: FETCH_DATA_SUCCESS,
payload: data
});
const fetchDataFailure = (error) => ({
type: FETCH_DATA_FAILURE,
payload: error
});
// 리듀서
const initialState = {
loading: false,
data: null,
error: null
};
const dataReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_DATA_REQUEST:
return {
...state,
loading: true,
error: null
};
case FETCH_DATA_SUCCESS:
return {
...state,
loading: false,
data: action.payload
};
case FETCH_DATA_FAILURE:
return {
...state,
loading: false,
error: action.payload
};
default:
return state;
}
};
로딩 상태를 효과적으로 표시하여 사용자에게 데이터 요청이 진행 중임을 알리는 것은 웹 애플리케이션의 사용자 경험 향상에 큰 도움이 됩니다.