인프런 커뮤니티 질문&답변

dlawnsdlekd님의 프로필 이미지
dlawnsdlekd

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

프로젝트 중 질문 있습니다

해결된 질문

작성

·

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

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

React.js 에서는 Client Side(브라우저 측)에서 데이터를 불러오도록 코드를 작성해야 하므로 로딩 상태를 관리하는 기능이 필수로 수반됩니다.

따라서 이 문제를 해결하시려면 다음 2가지 방식을 고려해보실 수 있을 것 같아요

 

첫번째. Skeleton을 이용해보세요

Skeleton 이란 아래 그림처럼 로딩스피너나 로딩바 대신 사용자에게 보여질 UI의 실루엣(또는 레이아웃)정도만 미리 보여주는 걸 말합니다.image

두번째. Next.js를 사용해보세요

React.js 라는 기술은 클라이언트 사이드에서 동작하도록 설계된 기술이기 때문에 기본적인 데이터 페칭 기능은 모두 클라이언트 측에서 동작하게 됩니다. 따라서 로딩 상태 관리를 피하기 어려운데요

만약 웹 서버측에서 데이터까지 모두 불러온 다음에 화면에 한방에 렌더링 시켜주고 싶으시다면 이때에는 클라이언트 사이드 측의 렌더링 기능으로 동작하는 리액트가 아닌 Next.js 등의 추가 프레임워크를 이용하셔야 합니다.

dlawnsdlekd님의 프로필 이미지
dlawnsdlekd
질문자

감사합니다!

dlawnsdlekd님의 프로필 이미지
dlawnsdlekd

작성한 질문수

질문하기