🚨 문제 인식

HLS영상을 비동기로 데이터를 받아올 때 각각의 컴포넌트에서 각각의 방식으로 로딩 및 에러처리를 처리했고, 그 결과 일정 코드가 중복되었고 비효율적이었다. 이를 체계화하여 비동기로 데이터를 받아올 때의 상황을 정리할 필요성이 있었다.

기존의 코드

const MainLiveSection = ({ title, type }: MainLiveSectionProps) => {
  const { data = [], isLoading, error } = useRecentLive();

  if (error) {
    return <div>데이터를 가져오는 중 에러가 발생했습니다.</div>;
  }

  return (
    <MainSectionContainer>
      <MainSectionHeader>
        <p className="live_section_title">{title}</p>
        <button className="live_section_button">전체보기</button>
      </MainSectionHeader>

      {isLoading && <div>로딩 중...</div>}

      {data.length === 0 && !isLoading && <div>데이터가 없습니다.</div>}
				// 코드 생략
    </MainSectionContainer>
  );
};

위와 같은 코드가 커스텀 훅으로 데이터를 가져오는 컴포넌트마다 있었다. isLoading과 error일때 각각 연산자와 조건문을 통해서 처리했었다.

🏃 해결 과정

관심사를 분리할 것

컴포넌트의 역할을 렌더링되는 것에만 집중

• 비지니스 로직
• 렌더링 로직

로딩과 에러처리는 해당 컴포넌트의 관심사에서 벗어난다고 판단

→ 로딩과 에러처리 역할을 **부모(처리해야할 부분)**로 위임

Suspense처리를 왜 해야하는가에 대한 의문

기존에 간단하게 로딩시에는

{isLoading && <div>로딩 중...</div>}

와 같이 비동기 데이터를 가져올 때 걸리는 시간에 대해서 크게 고민하지 않았다. 또한, 단순히 사용자 경험의 향상이라는 이유로 로딩처리를 하는 것이라 판단했지만 최적화와도 관련이 있었다.