kd021093477

안녕하세요! 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가 동작하지 않게 됩니다. &nbsp;리엑트 공식 문서에서는 CSR인 경우 실험적인 기능이지만, 데이터 fetching을 use와 함께 사용해서 Promise 상태를 Suspense에게 알려주라고 하고 있습니다. 아직은 실험 단계여서 아마 19 버전에 정식 반영되지 않을까 싶어요. 공식 문서의 Suspense와 use를 참고하면 좋을 것 같습니다. 공식 문서의 Suspense 예제 코드는 별도로 use hook을 만들어서 사용하고 있습니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://react.dev/reference/react/Suspense">https://react.dev/reference/react/Suspense</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://react.dev/reference/react/use">https://react.dev/reference/react/use</a>

kd021093477

投稿