Modal을 구현할 때 두 가지 방법이 있었습니다.
1. 조건부 렌더링으로 Modal 열림/닫힘
CSS의 transform 또는 opacity로 Modal 열림/닫힘
저는 조건부 렌더링을 사용하고, transition 효과를 주기위해 억지로 setTimeout을 이용해 해결했는데요조건부 렌더링을 사용한 이유가
모달을 사용하지도 않는데 내부 내용이 DOM트리에 존재하면 성능에 안좋지 않을까 였는데
지금에서야 생각이 든 것은
렌더트리는 시각적으로 보이는 요소만 렌더링에 포함하는 것이었습니다.
그러면 모달을 조건부 렌더링을 하지 않아도 괜찮은 걸까요?
모달은 파트2에서 다루고 있습니다.
강의를 수강하시면 원하시는 답을 얻을 수 있으리라 생각합니다.
여기서는 간단하게만 답변 드려보겠습니다.
일반적으로 모달 한두개 렌더링하고 하지 않는것이 성능에 지대한 영향을 주지는 않습니다.
많은 서비스에서 모달을 단 하나의 목적으로만 사용하기보다, 다양한 케이스에 서로 다른 모달을 띄워야 할 것입니다. 이들을 처음부터 전부 준비해놓기보다는, 필요할 때만 렌더링하는 편이 좋은 경우가 많습니다.
반면 한 화면에 단 한 두 개의 간단한 모달만 존재하는 경우에는 처음부터 렌더링해놓는 것이 더 나은 선택일 수도 있습니다.
답글
아하 감사합니다!!
파트2에 있었군요..!!
그러면 혹시 이 질문에는 답변해주실 수 있을까요..?ㅠㅠ
제가 생각했던
"렌더트리는 시각적으로 보이는 요소만 렌더링" 한다는 것과
"조건부 렌더링을 통한 렌더링"은 같은 성능을 내는 게 맞을까요?
성능에 지대한 영향은 안끼치는 것을 이해했지만
이 "시각적으로 보이는 요소만 렌더링" 한다는 의미가 어떤 의미일까 라는 생각이 들어서요 ㅠㅠㅠ
"시각적으로 보이는 요소만 렌더링 한다는 것은 조건부 렌더링과 똑같은 건가?" 라는 생각이 맞을까요?
답글
정재남
2024.09.04'보이지 않는 요소'란
opacity: 0등으로 스타일상 안보이게 숨긴것을 의미하지 않습니다. html의meta,link태그 같은 비가시적 요소들이나display: none으로 완전히 숨긴 경우를 의미할 뿐입니다.따라서 '보이는 요소만 렌더링'의 '보이는 요소'는, 위의 케이스들을 제외한 모든 것을 의미합니다. 그러니까 말씀하신 두 케이스의 성능이 같을 수는 없겠죠.