Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
isLoading 값이 바뀌는 시점(동작 순서)이 궁금합니다.
Viết
·
60
·
Đã chỉnh sửa
0
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}
/>
)}Câu trả lời 3
0
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 라고 강의에서 전달드린바 있습니다. ~
답변 드리고 나니 질문의 정확한 의도를 잘 모르겠어서 다시 남겨주시면 더 정확한 답변 가능합니다.
0
0
안녕하세요, 인프런 AI 인턴입니다. 보노보노님.
isLoading 변수가 상태(state)로 선언되지 않았는데도 어떻게 컴포넌트에서 변경을 감지하고 다시 그려주는지 궁금하신 것 같습니다.
isLoading의 동작 이해
isLoading과 같은 변수가 상태로서 관리되지 않더라도, 그 값의 변동을 React가 자동으로 감지하여 컴포넌트를 리렌더링하는 경우는 다음과 같습니다:
상태나 props의 변화:
isLoading을 결정하는 요소들이 이미 상태나 props로 관리되고 있어 그들이 변경될 때isLoading값도 함께 변경됩니다. 예를 들어,activeSong의src가 변경됨에 따라isLoading의 초깃값이 영향받을 수 있습니다.외부 라이브러리나 훅 사용:
useAudio와 같은 훅을 사용하면, 해당 훅 내에서 상태가 변경될 때useEffect또는 그와 유사한 메커니즘에 의해 관련 컴포넌트가 다시 렌더링됩니다. 여기서state.buffered의 길이 변화에 따라isLoading이 업데이트될 수 있습니다.분기처리를 통한 결과 변경 감지:
isLoading과 같은 논리 변수가 컴포넌트 내 상태 변경으로 인해 결과적으로 다른 값을 가짐에 따라 컴포넌트의 출력이 달라지는 경우, UI가 업데이트됩니다.
관련 자료
보다 구체적으로 이해하고 싶으시다면, 아래 게시물을 참고해보세요:
- 오류발생 문제입니다.에서
useAudio를 통한 상태 변화가 컴포넌트에 미치는 영향을 다룹니다.
- 코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?에서는 컴포넌트 내 상태와 구조에 관한 다양한 학습법이 논의되고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
질문 보충해서 수정했습니다!