자바스크립트 + 리액트 디자인 패턴

329

Chapter 12_

리액트 디자인 패턴

height={150}

rowCount={5}

rowHeight={35}

width={300}

>

{Cell}

</Grid>

);

ReactDOM.render(<Example />, document.getElementById("root"));

12.11.4

웹 플랫폼의 발전

최신 브라우저 중 일부는

CSS

의

content

-

visibility

20

속성을 지원합니다.

content

-

visibility

:

auto

를 설정하면 화면 밖 콘텐츠의 렌더링과 페인팅을 필요한 시점까지 지연

할 수 있습니다. 렌더링에 비용이 많이 드는 긴

HTML

문서가 있다면 이 속성을 사용해 보는

것을 고려해 보세요.

동적인 콘텐츠 목록을 렌더링하는 경우에는 여전히

react

-

window

와 같은 라이브러리를 사

용하는 것이 좋습니다. 화면 밖 요소를

display

:

none

으로 설정하거나

DOM

노드를 제

거하는 등 적극적인 방식으로 렌더링 성능을 최적화하기 때문에,

content

-

visibility

:

hidden

만으로는 라이브러리를 사용했을 때와 동일한 성능을 얻기 어렵습니다.

12.12

결론

다시 한번 강조하지만,

preload

는 신중하게 사용해야 하며 항상 프로덕션 환경에 미칠 영향

을 측정해야 합니다. 이미지

preload

가 문서에서 앞쪽에 ...