안녕하세요 오늘은..... 개념?? 설명?? 을 해보겠습니다!
바로 Suspense에 관한 내용입니다.
이걸 알게된 것은 사이드 플젝을 하면서.. 처음 봤습니다.. 그래서 뭔지 몰라서 공부하게 되었습니다..!
Suspense 넌 누고..?
React.Suspense는 트리 하단에 있는 일부 컴포넌트가 아직 렌더링할 준비가 되지 않은 경우 로딩 지시기 (Loading indicator)를 나타낼 수 있도록 해줍니다.
// 이 컴포넌트는 동적으로 불러옵니다
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
// Displays <Spinner> until OtherComponent loads
<React.Suspense fallback={<Spinner />}>
<div>
<OtherComponent />
</div>
</React.Suspense>
);
}위에서 나와있듯이 Suspense를 쓰면 '로딩중' 이놈을 구현할 수 있단 말입니다. 위 코드를 보듯이 Suspense에서 fallback 으로 Spinner를 불러오고 있죠? 이말은 해당 컴포넌트가 아직 렌더링이 되지 않을 경우 스피너를 불러와락! 이런말입니다.
그럼 Suspense 나타나기 전에는 어떻게 구현했나!
이 Suspense가 세상에 나오기 전에는 함수형일 경우 useEffect(), 클래스형일 경우 componentDidMount() 와 같은 hook 함수를 호출하는 것이었습니다.
하지만 React에서 비동기 데이터를 읽어오는 컴포넌트를 작성하면 몇 가지 고질적인 문제가 발생한다고 합니다.
사용자에게 UI가 마치 폭포처럼 순차적으로 나타나는 현상이 나타날 수 있다고 합니다. 상위 컴포넌트의 데이터 로딩이 끝나야지만 하위 컴포넌트의 데이터 로딩이 시작될 수 있기 때문에 주로 발생하게 됩니다.
경쟁 상태 (race conditions)에 취약합니다. 비동기 통신은 반드시 요청한 순서대로 데이터가 응답된다는 보장이 없기 때문에 의도치 않게 싱크가 맞지 않은 데이터를 제공할 수도 있습니다.
그래서 결론이 몬덱..?
로딩중 화면을 구현할 계획이 있다! 한다면 Suspense를 활용하게 되면 코드 가독성도 높이고 유지 보수성도 향상 시킬 수 있습니다!
또한 향후에는 Suspense가 데이터 가져오기(fetching)등의 더 많은 시나리오를 처리할 수 있도록 할 계획이 있다고 나와있습니다. 이를 통해서 Suspense에 활용도가 더 높아질 것으로 보입니다.
출처
