-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
Suspense 컴포넌트의 fallback 요소로 클라이언트 컴포넌트 전달?
24.05.01 20:35 작성 조회수 75
0
안녕하세요.
Suspense 컴포넌트의 fallback 요소로 서버 컴포넌트 전달은 문제가 없는데, 내부적으로 useEffect와 타이머를 사용하는 클라이언트 컴포넌트를 전달했더니 해당 훅과 관련된 내용은 모두 스킵되고 그냥 초기 렌더링 내용만 나오는 것 같은데, 애초에 클라이언트 컴포넌트는 전달이 불가능한걸까요?
클라이언트 컴포넌트 사용 의도는 1초마다 로딩바 게이지가 증가하는 모습을 보여주고 싶어서 사용해보려고 했습니다.
공식 문서를 봐도 해당 내용에 대해서는 언급이 없는 것 같습니다.
감사합니다.
답변을 작성해보세요.
2
손준석
2024.05.01
안녕하세요! Suspense 내부에서 컴포넌트의 상태를 추적하기 위해서는 Promise의 상태를 throw 해주어야 합니다. Suspense는 내부 자식 요소에서 throw한 promise의 상태가 pending 인경우 fallback에 등록해준 컴포넌트를, success 상태일 경우 promise 상태가 완료되었다는 것을 인지하고 내부 children 컴포넌트를 보여주게 됩니다.
서버 컴포넌트가 정상적으로 동작한 이유는 async/await로 감싸주었기 때문에 await 걸린 코드가 완료된 여부를 파악하여 Suspense가 이를 추적하고 동작이 가능했습니다.
Next.js에서 loading.jsx, error.jsx 모두 이러한 형태로 구현되어 있습니다.
하지만 client component에서 useEffect를 사용하는 경우는 반환되는 promise 상태가 없이 JSX 요소만을 반환하기 때문에 정상적으로 Suspense가 동작하지 않게 됩니다.
리엑트 공식 문서에서는 CSR인 경우 실험적인 기능이지만, 데이터 fetching을 use와 함께 사용해서 Promise 상태를 Suspense에게 알려주라고 하고 있습니다. 아직은 실험 단계여서 아마 19 버전에 정식 반영되지 않을까 싶어요. 공식 문서의 Suspense와 use를 참고하면 좋을 것 같습니다.
공식 문서의 Suspense 예제 코드는 별도로 use hook을 만들어서 사용하고 있습니다.
https://react.dev/reference/react/Suspense
https://react.dev/reference/react/use
답변 1