[FE] 성능 최적화를 위한 레이지 로딩: useInView 적용

🐢 레이지 로딩(Lazy Loading)

레이지 로딩은 말 그대로 '게으르게 로딩하는 것'이다.
웹 페이지를 처음 불러올 때 모든 리소스를 한 번에 불러오지 않고, 사용자가 실제로 필요할 때(예: 스크롤로 화면에 나타날 때) 불러오는 방법이다.

특히 이미지, 비디오, 외부 스크립트처럼 용량이 큰 리소스에 많이 사용되며, 화면에 보이지도 않는 이미지들을 굳이 미리 로딩하지 않기 때문에 성능과 사용자 경험을 크게 향상시킬 수 있다. 🚀

레이지 로딩을 사용하는 이유

1. 초기 로딩 속도 개선
첫 페이지 진입 시 불필요한 이미지들을 불러오지 않으므로 로딩 시간이 짧아진다.

2. 트래픽 절약
사용자가 끝까지 스크롤하지 않는다면, 해당 영역의 이미지들은 로드되지 않기 때문에 트래픽을 아낄 수 있다.

👁️ useInView

useInView는 react-intersection-observer 라이브러리에서 제공하는 React 훅(Hook)으로
어떤 요소가 뷰포트(Viewport)에 들어왔는지를 감지하는 기능이다.

동작 방식

1. 특정 DOM 요소가 뷰포트 안에 들어오는 시점을 감지하고
2. inView 값으로 화면에 보이는지 아닌지를 boolean으로 반환한다.

const { ref, inView } = useInView();

• ref: 감시할 대상 요소에 연결
• inView: 요소가 화면에 들어오면 true, 들어오지 않았으면 false

inView가 true인 시점에 이미지를 로드하거나, 애니메이션을 트리거할 수 있다.

주요 옵션

• triggerOnce: true > true로 설정하면 처음 한 번만 감지하고 이후로는 감지하지 않음
• threshold: 0.5 > 요소가 얼마나 보여야 감지할지(0~1 사이 값)
  예) 0.5는 50% 이상 요소가 보여야 감지된다
• rootMargin > 뷰포트 감지 영역을 늘리거나 줄일 수 있음
  예) '100px 0px' → 위쪽으로 100px 미리 감지

적용 코드

1. ref를 Link 태그에 연결하여 링크 자체가 뷰포트에 들어왔는지를 감지한다.
2. 요소가 감지되면 inView === true로 변경되며, 이미지가 렌더링된다.

👉🏻 불필요하게 화면에 보이지 않는 이미지 리소스를 미리 불러오지 않도록 방지

적용 결과

network를 통해 확인해보면 스크롤을 내릴 때마다 이미지가 렌더링되는 것을 볼 수 있다.