데이터 속성

HTML 요소에 추가적인 정보를 저장할 때 사용하는 방식이다. 기본적으로 data-속성이름으로 사용하는데, 이를 사용해서 데이터를 그냥 저장할 수 있다. 해당 데이터에 접근하는 방식은 요소.dataset.속성이름으로 접근한다.

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

접근 시

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Lazy Loading 적용하기

data- 속성을 이용해서 사전에 이미지가 뷰포트에 보여지기 전에 이미지를 로딩하는 것을 막을 수 있다.

IntersectionObserver와 같이 사용한다. 기본적인 골자는 다음과 같다.

• 이미지의 data-src 속성에 해당 이미지 url을 저장한다. src 속성은 state로 관리되며 디폴트 값으로 “” 빈 string을 저장한다.
• observerEntry가 isIntersecting 된다면, 즉 해당 요소가 뷰포트에 보이게 된다면 src를 원래 저장되어 있던 data-src에서 가져와서 집어넣는다.

function Image() {
	...
	const [imageUrl, setImageUrl] = useState("")
	...

	useEffect(() => {
		...
		if (entry.isInterSecting) {
			setImageUrl(entry.target.dataset.src); // 이미지 URL 
		}
	}, [entry,...])

	return (
		<div>
			<img
				...
				src={imageUrl}
				data-src={image.download_url}  // 이미지 URL 저장소
				...
				/>
		</div>
	)
}