React 렌더링 - visibility, display, opacity 그리고 조건부 렌더링
1. visibility: hidden && opacity : 0
- visibility: hidden과 opacity : 0은 모두 해당 요소가 화면에 렌더링되지만 투명하게 보이게끔 만들어준다. 하지만, 둘다 여전히 자리를 차지한다.
둘의 차이점이라면 visibility:hidden은 뒤에 있는 요소를 클릭할 수 있지만, opacity: 0은 불가능하다는 것.
2. display:none
2) display: none은 해당 요소를 DOM 트리까지만 가져오고 렌더트리에서는 제외해준다. 즉, 레이아웃에 포함되지 않는다. 그래서 해당 요소가 자리조차 차지하지 않게 된다.
하지만, DOM 트리까지 해당 요소를 가져가야 하기 때문에, 해당 요소, 예를 들면 컴포넌트를 생성하기 위해 필요한 계산 과정은 전부 거쳐야 한다.
즉, 리렌더링에 따른 자원소모는 피하지 못하는 방법이라는 뜻이다.
3. 결론
=> 그래서 사실 최적화 측면에서 가장 적합한 방법은 조건부 렌더링이다.
조건부 렌더링을 사용하명 condition에 해당하지 않을때는 아예 렌더링을 하지 않기 때문에 해당 컴포넌트를 생성하는 계산자체가 필요없게 된다.
4. 추가 설명
- 렌더 트리란, CSSOM과 DOM이 결합된 것을 말한다. 이 렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 작동합니다. 최적의 렌더링 성능을 얻기 위해서는 이러한 각 단계를 최적화하는 것이 중요하다.
- 렌더트리는 페이지를 렌더링하는데 필요한 노드만 포함합니다.
- 단, display:none은 렌더트리에 포함되지 않는다. (visibility는 빈상자로 렌더링됨)
- 렌더트리가 준비되면 '레이아웃' 단계를 진행할 수 있다.
[참고자료]
https://iborymagic.tistory.com/116
https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=ko
