isLoading 값이 바뀌는 시점(동작 순서)이 궁금합니다.

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

12.9 Slider 노래 재생 연동 - 1

작성

수정됨

12.9강에서

isLoading이 useState로 선언한 변수가 아닌데도 로딩 컴포넌트에서 재생 버튼으로 다시 그려주나요?

isLoading이 true에서 false로 바뀌는 시점과 동작이 어떻게 이루어 지는지 궁금합니다.

const isLoading = activeSong?.src && state.buffered?.length === 0;

{isLoading ? (
    <ClipLoader color="#FFF" />
  ) : state.playing ? (
    <AiOutlinePause
        size={40}
        className=" cursor-pointer"
        onClick={onClickPauseBtn}
      />
    ) : (
      <RiPlayFill
        size={40}
        className=" cursor-pointer"
        onClick={onClickStartBtn}
      />
    )}

답변 3

도도(코딩루팡)

지식공유자

isLoading이 useState로 선언한 변수가 아닌데도 로딩 컴포넌트에서 버튼으로 다시 그려주나요?

https://github.com/dodokyo/yt-music-clone/blob/main/app/playlist/page.tsx

로딩 변수가 아닌데 로딩 컴포넌트가 그려지는 경우는 위 page.tsx가 로딩 되는 동안 loading.tsx가 렌더링 되는 경우 입니다.

page.tsx 는 await로 중간에 비동기로 처리 되는 부분이 있습니다.
" const playlist = await getPlaylistById(Number(props.searchParams.list));"
이 부분이죠.
위 비동기 처리가 빠르게 처리되긴 하지만, 그 동안 페이지가 보여주어야 하는 컴포넌트는 loading.tsx라고 약속한것이 next.js 입니다.
내부적인 동작원리는 React suspense 라고 강의에서 전달드린바 있습니다. ~

답변 드리고 나니 질문의 정확한 의도를 잘 모르겠어서 다시 남겨주시면 더 정확한 답변 가능합니다.

보노보노

질문자

질문 보충해서 수정했습니다!

보노보노

질문자

isLoading이 파생된 상태변수라는 의미인가요?

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 보노보노님.

isLoading 변수가 상태(state)로 선언되지 않았는데도 어떻게 컴포넌트에서 변경을 감지하고 다시 그려주는지 궁금하신 것 같습니다.

isLoading의 동작 이해

isLoading과 같은 변수가 상태로서 관리되지 않더라도, 그 값의 변동을 React가 자동으로 감지하여 컴포넌트를 리렌더링하는 경우는 다음과 같습니다:

상태나 props의 변화: isLoading을 결정하는 요소들이 이미 상태나 props로 관리되고 있어 그들이 변경될 때 isLoading 값도 함께 변경됩니다. 예를 들어, activeSong의 src가 변경됨에 따라 isLoading의 초깃값이 영향받을 수 있습니다.
외부 라이브러리나 훅 사용: useAudio와 같은 훅을 사용하면, 해당 훅 내에서 상태가 변경될 때 useEffect 또는 그와 유사한 메커니즘에 의해 관련 컴포넌트가 다시 렌더링됩니다. 여기서 state.buffered의 길이 변화에 따라 isLoading이 업데이트될 수 있습니다.
분기처리를 통한 결과 변경 감지: isLoading과 같은 논리 변수가 컴포넌트 내 상태 변경으로 인해 결과적으로 다른 값을 가짐에 따라 컴포넌트의 출력이 달라지는 경우, UI가 업데이트됩니다.

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

isLoading 값이 바뀌는 시점(동작 순서)이 궁금합니다.

isLoading의 동작 이해

관련 자료