Web/React

visibility, display, opacity 그리고 조건부 렌더링

iborymagic 2021. 12. 14. 19:22
반응형

React를 사용하다가 컴포넌트의 렌더링과 관련해서 헷갈리는 사항이 생겨 정리했다.

 

visibility: hidden과 opacity: 0은 모두 해당 요소가 화면에 렌더링되지만 투명하게 보이게끔 만들어준다.

하지만 둘 다 요소를 투명하게 보이게 할 뿐, 해당 요소는 여전히 자리를 차지한다.

(차지하는 자리만큼 뻥 비어보이게 된다)

둘의 차이점이라면 visibility: hidden은 뒤에 있는 요소를 클릭할 수 있지만, opacity: 0은 불가능하다는 것.

 

반면, display: none은 해당 요소를 DOM 트리까지만 가져가고 렌더 트리에서는 제외해준다.

즉, 레이아웃에 포함되지 않는다. 그래서 해당 요소가 자리조차도 차지하지 않게 된다.

하지만 DOM 트리까지 해당 요소를 가져가야 하기때문에, 

해당 요소, 예를 들면 컴포넌트를 생성하기 위해 필요한 계산 과정은 전부 거쳐야 한다.

즉, 리렌더링에 따른 자원 소모는 피하지 못하는 방법이라는 뜻.

 

그래서 사실 최적화 측면에서 가장 적합한 방법은 조건부 렌더링.

조건부 렌더링을 사용하면 condition에 해당하지 않을 때는 아예 렌더링을 하지 않기 때문에

해당 컴포넌트를 생성하는 계산 자체가 필요없게 된다.

// isMenuOpen이 true일 때만 Menu 컴포넌트를 렌더링
const Component = () => {
	return (
    	<div>
			{isMenuOpen && <Menu />}
        </div>
	);
};

상황에 맞는 조건을 고려하여 적절한 방법을 사용할 수 있게 기억해두는 것이 중요할 듯.

 

 

 

출처

Stackoverflow: visibility:hidden vs display:none vs opacity:0 -  https://stackoverflow.com/questions/14731049/visibilityhidden-vs-displaynone-vs-opacity0

Web Fundamentals: 렌더링 트리 생성, 레이아웃 및 페인트 -  https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko

Develop To be a Developer 블로그: 조건부 렌더링 vs display none - https://ssangq.netlify.app/posts/conditional-rendering-vs-diplay-none

반응형