[MUI] 로딩 기능 추가

로딩(Loading)시 나오는 스피너(Spinner)

 

• 화면에 불러오면 바로 불러지지 않고 일정 시간을 두고 메인화면에 렌더링
• 공백 기간 동안 로딩 컴포넌트 보여주는 식
• 로딩도 하나의 상태(로딩이 되었다, 안 되었다) -> Boolean 형태
• 상태로 관리

• 요청을 시작했을 때 로딩상태 true                     ->  <Loading /> 컴포넌트
• 데이터 패치가 완료되었을 때 로딩상태 false     ->   <불러올 내용 /> 컴포넌트

 

import { CircularProgress} from "@mui/material";

const [isLoading, setIsLoading] = useState(false);


useEffect(() => {
    setIsLoading(true);
    
    fetch("/product")
      .then((response) => response.json())
      .then((data) => setProducts(data.products))
      .finally(() => setIsLoading(false))
  }, []);
  
if (isLoading) return <CircularProgress />;

 

• setIsLoading(ture) 호출, 로딩 상태 true
• fetch("/product") 백엔드 API 서버에 데이터 요청, 비동기적으로 실행, 엔드포인트에서 응답 반환할 때 까지 기다림, (Promise)반환
• 응답이 완료 되었을 경우 핸들링
• .then((response) => response.json()) 서버 응답을 JSON으로 변환
  .then((data) => setProducts(data.products)) data 객체의 products 값을 컴포넌트 상태로 설정
• 서버에서 서받은 제품 데이터를 컴포넌트의 상태로 저장
  .finally(() => setIsLoading(false)) 비동기 작업이 완료되면 setIsLoading 호출해서 로딩상태 false