해결된 질문
작성
·
124
0
axios요청을 통해 서버에서 데이터를 불러오고 그 데이터를 화면에 보여줄 때 아래와 같은 방식을 사용하고 있습니다. 그런데 이러면 isLoading이 true일때 잠깐 화면에 보이는 loading이 맘에 안들어서요.. 이렇게 안하면 data를 찾을수 없다고 에러가 뜨고.. isLoading state로 관리하는 것 말고는 방법이 없을까요?
import { useState, useEffect } from 'react';
import axios from 'axios';
const MyComponent = () => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/data');
setData(response.data);
} catch (error) {
setError(error);
} finally {
setIsLoading(false);
}
};
fetchData();
}, []);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
{data ? (
<div>{data}</div>
) : (
<div>No data available</div>
)}
</div>
);
};
export default MyComponent;
답변 1
0
안녕하세요 이정환입니다.
React.js 에서는 Client Side(브라우저 측)에서 데이터를 불러오도록 코드를 작성해야 하므로 로딩 상태를 관리하는 기능이 필수로 수반됩니다.
따라서 이 문제를 해결하시려면 다음 2가지 방식을 고려해보실 수 있을 것 같아요
첫번째. Skeleton을 이용해보세요
Skeleton 이란 아래 그림처럼 로딩스피너나 로딩바 대신 사용자에게 보여질 UI의 실루엣(또는 레이아웃)정도만 미리 보여주는 걸 말합니다.
두번째. Next.js를 사용해보세요
React.js 라는 기술은 클라이언트 사이드에서 동작하도록 설계된 기술이기 때문에 기본적인 데이터 페칭 기능은 모두 클라이언트 측에서 동작하게 됩니다. 따라서 로딩 상태 관리를 피하기 어려운데요
만약 웹 서버측에서 데이터까지 모두 불러온 다음에 화면에 한방에 렌더링 시켜주고 싶으시다면 이때에는 클라이언트 사이드 측의 렌더링 기능으로 동작하는 리액트가 아닌 Next.js 등의 추가 프레임워크를 이용하셔야 합니다.
감사합니다!