<div id="readability-page-1" class="page"><div><h4 id="suspense-image">Suspense Image</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/cfea81ec-89ca-4ed3-a58a-1326eaf45f7c/image.png">
이런 경우를 생각해보자. 
상단의 버튼으로 배 이름을 클릭할 때마다 새로운 데이터를 가져온다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/fde652fb-65e9-40bf-908d-99a286daaed2/image.png">
<code>Suspese</code>되어 있는 <code>ShipDetails</code> 컴포넌트에서 직접 호출하고 
<img src="https://velog.velcdn.com/images/dongha1992/post/c0466a8b-1b85-4f62-838c-e8a2c71dd2e2/image.png">
<code>getShip</code>은 캐시의 역할을 하고 실질적으로 데이터를 요청하는 부분은 <code>getShipImp</code>다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/3715d01a-bafd-4391-8ac7-7fc023b862c7/image.png">
<h4 id="문제">문제</h4>
만약 유저의 네트워크가 느리다고 가정하자. (월말에 데이터를 다써서 3G로 쓰는 경우가 많은데 네트워크가 느린 경우, 페이지의 기본기가 적나라하게 드러난다고 느꼈다.)
<img src="https://velog.velcdn.com/images/dongha1992/post/ac199caa-0b9f-4307-ac4d-4f3d7264a5e7/image.gif">
새로운 데이터를 응답받았지만, 잠시동안 이전 img가 보이는 것을 확인할 수 있다.
이유인즉슨 브라우저는 새로운 이미지가 완전히 로드될 때까지 이전 이미지를 유지하기 때문이다.
물론 브라우저 캐시가 잡히면 이런 현상은 사라진다.
<img src="https://velog.velcdn.com/images/dongha1992/post/b6c35ac9-2671-4016-b367-778172d193ea/image.gif">
이런 식으로 새로운 이미지가 다운로드 되기 전까지 폴백 이미지를 보여주면 좋을 것 같다. 이를 해결하기 위해 <code>suspense</code> 를 사용하자.
<h4 id="suspense">suspense</h4>
먼저 <code>Img</code> 컴포넌트를 하나 만든다.
<img src="https://velog.velcdn.com/images/dongha1992/post/342131a9-9256-4bc4-87b0-b69cfeda292f/image.png">
<code>Img</code> 컴포넌트 내부에 <code>imgSrc(src)</code>는 <code>promise</code>를 반환하는 함수다.
<img src="https://velog.velcdn.com/images/dongha1992/post/90b2c9f2-c248-4875-b766-0d65c13284a9/image.png">
이미지 캐시가 있다면 이미지 캐시를 반환하고 없다면 <code>preloadImage</code> 함수를 호출한다
<img src="https://velog.velcdn.com/images/dongha1992/post/0e74032e-4708-45b5-8b6b-8c57130b8c2c/image.png">
<code>preloadImage</code>는 브라우저가 이미지를 실제로 렌더링하기 전에 네트워크 요청을 통해 해당 이미지를 캐싱하는 방식이다. 
즉, <code>imgSrc(src)</code>에서 반환된 promise 이미지 객체를 <code>use(imgSrc(src))</code> 에서 사용하게 되는데, 이는 <code>suspense</code>의 트리거로 작동한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/49083777-6117-49a0-9ac3-f17949332a08/image.gif">
다시 확인해보면 버튼 클릭시 이미지가 완료되기 전까지는 suspense에 걸리는 것을 확인할 수 있다. 
loading UI를 보여주는 것보다 suspense를 활용하여 데이터를 보여주는 것도 좋은 방법!
<h4 id="error-boundary">error boundary</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/6d851e55-53cb-4518-b300-184cfa40fcac/image.png">
<code>ErrorBoundary</code>를 <code>ShipDetails</code> 전체를 감싸게 되면서 에러가 발생하면 위와 같은 에러 UI가 렌더링된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/6aa6773a-f810-438a-9b2c-064a66c489f1/image.png">
<code>ErrorBoundary</code>의 장점은 특정 컴포넌트만 에러 바운더리를 지정할 수 있다는 것이다
가령, img 요청이 잘못되어 <code>Img</code> 컴포넌트에만 에러가 발생하고 나머지 데이터는 잘 들어왔다고 가정하자
그렇다면 전체 에러 UI를 띄울 필요는 없을 것이다(물론 이건 프로덕트 정책에 따라 다를 것이다)
그렇다면 부분적으로 <code>ErrorBoundary</code> 적용해보자
<img src="https://velog.velcdn.com/images/dongha1992/post/f6cb3038-981d-4351-9e80-b6c9a31a5c21/image.png">
기존의 <code>&lt;Img/&gt;</code> 컴포넌트를 맵핑하는 <code>ShipImg</code> 컴포넌트를 만든다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/fcbfbd2c-4265-4563-91d2-3a9cb0d15c67/image.png">
그리고 <code>ShipImg</code>를 사용하기만 하면 끝!
<img src="https://velog.velcdn.com/images/dongha1992/post/554a4499-2155-4859-92fd-33255089e958/image.png">
이제 이미지 로드에 실패해도 이미지를 제외한 나머지 데이터는 화면에 잘 나온다!
<h4 id="key-props">Key props</h4>
최상단 버튼을 눌러서 새로운 전함(?) 데이터를 가져온다고 하자 (느린 네트워크 환경에서)
우리는 여기서 waterfall을 발견할 수 있다. 전함 데이터는 모두 다운로드가 되었는데도 이미지가 아직 다운로드 중이라 Suspense가 pending 상황이 된 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/46cf5bc5-6feb-4a1e-b20b-c2cfd66a302e/image.gif">
(영상이 너무 빠르다면 사진으로 설명)
<img src="https://velog.velcdn.com/images/dongha1992/post/64abeb91-7adc-444f-85b3-265c2118820c/image.png">
<code>get-ship</code>이 모두 다운 받고도 <code>webp</code>가 다운로드 중이라 화면은 여전히 로딩 상태인 것! 이것은 크나큰 낭비다!
데이터가 다 받아졌다면 데이터를 먼저 보여주고, 차례대로 이미지를 보여준다면 더 낫지 않을까?
<code>Suspense</code>에 <code>key</code>를 주면서 해결이 가능하다. 
<h4 id="suspense-분리">Suspense 분리</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/5495e15f-9d79-4815-a507-ce69de52f3df/image.png">
먼저 <code>ShipImg</code>에 Supense를 추가한다. 하지만 변화는 없을 것이다. 왜냐하면 추가한 <code>Suspense</code> 내부에 <code>&lt;Img/&gt;</code> 는 여전히 부모의 서스펜딩에 속하기 때문이다.
이제 <code>key</code>를 통해 새로운 바운더리를 만들어줘야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/f3b36d34-319e-4377-a8f7-a3326c921035/image.png">
이제 <code>props.src</code> 가 바뀔 때마다 기존의 에러 바운더리를 제거하고 에러 바운더리에 속한 모든 자식들을 새로운 에러 바운더리에 넣는다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/5ac7fcc0-da22-4914-ba53-41ce2e6b51dd/image.gif">
이제 원하는대로 <code>get-ship</code> api가 끝나면 Detail에 정보가 먼저 나오고 <code>Img</code>는 fallback이 된다. 
그리고 img 다운로드가 끝나면 이미지가 제대로 나오게 된다. 
참고 : <a href="https://www.epicreact.dev/">epic-react</a></div></div>

삶도 재입학이 되나요?

Suspense Image
이런 경우를 생각해보자. 
상단의 버튼으로 배 이름을 클릭할 때마다 새로운 데이터를 가져온다. 
Suspese되어 있는 ShipDetails 컴포넌트에서 직접 호출하고 
getShip은 캐시의 역할을 하고 실질적으로 데이터를 요청하는 부분은 getShipImp다. 
문제
만약 유저의 네트워크가 느리다고 가정하자. (월말에 데이터를 다써서 3G로 쓰는 경우가 많은데 네트워크가 느린 경우, 페이지의 기본기가 적나라하게 드러난다고 느꼈다.)
새로운 데이터를 응답받았지만, 잠시동안 이전 img가 보이는 것을 확인할 수 있다.
이유인즉슨 브라우저는 새로운 이미지가 완전히 로드될 때까지 이전 이미지를 유지하기 때문이다.
물론 브라우저 캐시가 잡히면 이런 현상은 사라진다.
이런 식으로 새로운 이미지가 다운로드 되기 전까지 폴백 이미지를 보여주면 좋을 것 같다. 이를 해결하기 위해 suspense 를 사용하자.
suspense
먼저 Img 컴포넌트를 하나 만든다.
Img 컴포넌트 내부에 imgSrc(src)는 promise를 반환하는 함수다.
이미지 캐시가 있다면 이미지 캐시를 반환하고 없다면 preloadImage 함수를 호출한다
preloadImage는 브라우저가 이미지를 실제로 렌더링하기 전에 네트워크 요청을 통해 해당 이미지를 캐싱하는 방식이다. 
즉, imgSrc(src)에서 반환된 promise 이미지 객체를 use(imgSrc(src)) 에서 사용하게 되는데, 이는 suspense의 트리거로 작동한다. 
다시 확인해보면 버튼 클릭시 이미지가 완료되기 전까지는 suspense에 걸리는 것을 확인할 수 있다. 
loading UI를 보여주는 것보다 suspense를 활용하여 데이터를 보여주는 것도 좋은 방법!
error boundary
ErrorBoundary를 ShipDetails 전체를 감싸게 되면서 에러가 발생하면 위와 같은 에러 UI가 렌더링된다.
ErrorBoundary의 장점은 특정 컴포넌트만 에러 바운더리를 지정할 수 있다는 것이다
가령, img 요청이 잘못되어 Img 컴포넌트에만 에러가 발생하고 나머지 데이터는 잘 들어왔다고 가정하자
그렇다면 전체 에러 UI를 띄울 필요는 없을 것이다(물론 이건 프로덕트 정책에 따라 다를 것이다)
그렇다면 부분적으로 ErrorBoundary 적용해보자
기존의 <Img/> 컴포넌트를 맵핑하는 ShipImg 컴포넌트를 만든다. 
그리고 ShipImg를 사용하기만 하면 끝!
이제 이미지 로드에 실패해도 이미지를 제외한 나머지 데이터는 화면에 잘 나온다!
Key props
최상단 버튼을 눌러서 새로운 전함(?) 데이터를 가져온다고 하자 (느린 네트워크 환경에서)
우리는 여기서 waterfall을 발견할 수 있다. 전함 데이터는 모두 다운로드가 되었는데도 이미지가 아직 다운로드 중이라 Suspense가 pending 상황이 된 것이다. 
(영상이 너무 빠르다면 사진으로 설명)
get-ship이 모두 다운 받고도 webp가 다운로드 중이라 화면은 여전히 로딩 상태인 것! 이것은 크나큰 낭비다!
데이터가 다 받아졌다면 데이터를 먼저 보여주고, 차례대로 이미지를 보여준다면 더 낫지 않을까?
Suspense에 key를 주면서 해결이 가능하다. 
Suspense 분리
먼저 ShipImg에 Supense를 추가한다. 하지만 변화는 없을 것이다. 왜냐하면 추가한 Suspense 내부에 <Img/> 는 여전히 부모의 서스펜딩에 속하기 때문이다.
이제 key를 통해 새로운 바운더리를 만들어줘야 한다. 
이제 props.src 가 바뀔 때마다 기존의 에러 바운더리를 제거하고 에러 바운더리에 속한 모든 자식들을 새로운 에러 바운더리에 넣는다. 
이제 원하는대로 get-ship api가 끝나면 Detail에 정보가 먼저 나오고 Img는 fallback이 된다. 
그리고 img 다운로드가 끝나면 이미지가 제대로 나오게 된다. 
참고 : epic-react

Epic React - Suspense Image

댓글