React - Lazy Image Loading

React

Lazy Image Loading

첫 페이지에 모달을 띄워야 하는데… 그 모달 안에 이미지가 들어가야 한다. 크기는 200X362정도. 해당 컴포넌트에서 이미지를 로딩하면 이미지가 늦게 로드되는 문제가 있는데… 이게 굉장히 눈에 거슬린다.
나는 이미지가 있는 컴포넌트가 불리는 컴포넌트에서 미리 이미지 태그를 선언해 놓고, display: none으로 숨겼다.

// Modals.js
import Modal1 from './Modal1';
import Modal2 from './Modal2';

render() {
 <div className="modals-page">
  <img
   src={`imgs/ad/modal_01.png`}
   width={243}
   style={{ display: 'none' }}
  />
  <img
   src={`imgs/ad/modal_02.png`}
   width={200}
   style={{ display: 'none' }}
  />
 </div>
}

// Modal1.js
...
<img
 src={`imgs/ad/modal_01.png`}
 width={243}
/>

// Modal2.js
...
<img
 src={`imgs/ad/modal_01.png`}
 width={200}
/>

Modals.js에서 먼저 이미지를 로딩시키고, Modals1.js, Modal2.js에서 이미지를 보이게하면 이미지가 늦게 로드되면서 깜빡이는 문제를 해결할 수 있다.
img 태그에서 width만 설정한 이유: 이미지 사이즈를 width, height 모두 주면 이미지가 찌그러져 나올 수 있다. 따라서 width 또는 height만 주면 비율대로 화면에 보이기 때문에 찌그러지지 않는다!