반응형
SMALL
visibility는 이미 DOM에는 등록이됐지만, 실제로는 UI가 보이지 않게합니다.
display: none은 해당 엘리먼트가 DOM에서 완전히 제거됩니다.
그러면 엘리먼트가 다시 표시돼야할 때, DOM에 추가 렌더링이 필요하게 돼서
visibility에 비해 성능에 부담을 줄 수 있습니다.
성능에 부담을 줄 수 있는 이유는 다음과 같습니다.
visibility: hidden의 경우, 엘리먼트가 브라우저에서 숨겨져도 레이아웃 계산에 참여합니다.
반면에 display: none의 경우, 레이아웃 계산에서 해당 엘리먼트를 제외하고 계산하기 때문에,
엘리먼트를 다시 표시할 때 돔 렌더링 비용이 더 많이 들어갈 수 있습니다.
하지만, 최적화의 경우 성능차이가 미미하므로 가독성, 유지보수성을 우선시 할 필요도 있습니다.
반응형
LIST
'React' 카테고리의 다른 글
| 리액트에서 useState가 불변성을 유지하는 방법 (0) | 2023.03.28 |
|---|---|
| 리액트에서 불변성이 필요한 이유 (0) | 2023.03.27 |
| React에서 Context API, Redux, Recoil 분해해보기 (0) | 2023.03.27 |
| React Hooks는 클로저를 사용하는가? (0) | 2023.03.15 |
| 리액트의 소스코드를 대략적으로 분석해보자 - 1 (0) | 2023.03.15 |