[Korean FE Article] 리액트로 점진적 이미지 로딩 구현하기: 튜토리얼
글 링크: https://velog.io/@eunbinn/progressive-image-loading-react-tutorial
소개
고화질의 이미지는 존재만으로도 사용자 경험을 증진시키고 더 몰입할 수 있게 합니다. 하지만 고화질일수록 용량이 커지기 때문에, 네트워크 상황이 좋지 않을 경우 로딩 시간을 증가시켜 오히려 사용자 경험에 악영향을 끼칠 수도 있습니다. 따라서 로딩 경험을 긍정적으로 바꿀 필요가 있는데요, 이때 많이 사용되는 것이 점진적 로딩입니다. 이 글에서는 점진적 로딩이 무엇인지, 또 리액트로 어떻게 구현할 수 있는지 안내합니다 :)
tl;dr
점진적 로딩이란 실제 이미지가 로드 되기 전까지 미리 보기 이미지를 표시하는 것을 말합니다.
이미지가 곧 보일 것임을 인식하게 하여 사용자 경험을 향상시킴과 동시에 이미지 로드로 발생하는 레이아웃 변경 또한 방지할 수 있습니다.
`useState`를 사용하여 이미지 소스를 상태 변수에 저장하고 `useEffect`를 사용하여 실제 이미지가 로드되면 이미지를 업데이트합니다.
`react-progressive-graceful-image` 라이브러리를 사용할 수도 있습니다.