제가 Modal 기능을 구현하고 있는데
472
Modal을 구현할 때 두 가지 방법이 있었습니다.
1. 조건부 렌더링으로 Modal 열림/닫힘
CSS의 transform 또는 opacity로 Modal 열림/닫힘
저는 조건부 렌더링을 사용하고, transition 효과를 주기위해 억지로 setTimeout을 이용해 해결했는데요조건부 렌더링을 사용한 이유가
모달을 사용하지도 않는데 내부 내용이 DOM트리에 존재하면 성능에 안좋지 않을까 였는데
지금에서야 생각이 든 것은
렌더트리는 시각적으로 보이는 요소만 렌더링에 포함하는 것이었습니다.
그러면 모달을 조건부 렌더링을 하지 않아도 괜찮은 걸까요?
답변 2
0
모달은 파트2에서 다루고 있습니다.
강의를 수강하시면 원하시는 답을 얻을 수 있으리라 생각합니다.
여기서는 간단하게만 답변 드려보겠습니다.
일반적으로 모달 한두개 렌더링하고 하지 않는것이 성능에 지대한 영향을 주지는 않습니다.
많은 서비스에서 모달을 단 하나의 목적으로만 사용하기보다, 다양한 케이스에 서로 다른 모달을 띄워야 할 것입니다. 이들을 처음부터 전부 준비해놓기보다는, 필요할 때만 렌더링하는 편이 좋은 경우가 많습니다.
반면 한 화면에 단 한 두 개의 간단한 모달만 존재하는 경우에는 처음부터 렌더링해놓는 것이 더 나은 선택일 수도 있습니다.
0
아하 감사합니다!!
파트2에 있었군요..!!
그러면 혹시 이 질문에는 답변해주실 수 있을까요..?ㅠㅠ
제가 생각했던
"렌더트리는 시각적으로 보이는 요소만 렌더링" 한다는 것과
"조건부 렌더링을 통한 렌더링"은 같은 성능을 내는 게 맞을까요?
성능에 지대한 영향은 안끼치는 것을 이해했지만
이 "시각적으로 보이는 요소만 렌더링" 한다는 의미가 어떤 의미일까 라는 생각이 들어서요 ㅠㅠㅠ
"시각적으로 보이는 요소만 렌더링 한다는 것은 조건부 렌더링과 똑같은 건가?" 라는 생각이 맞을까요?
0
'보이지 않는 요소'란 opacity: 0 등으로 스타일상 안보이게 숨긴것을 의미하지 않습니다. html의 meta, link 태그 같은 비가시적 요소들이나 display: none으로 완전히 숨긴 경우를 의미할 뿐입니다.
따라서 '보이는 요소만 렌더링'의 '보이는 요소'는, 위의 케이스들을 제외한 모든 것을 의미합니다. 그러니까 말씀하신 두 케이스의 성능이 같을 수는 없겠죠.
일렉트론으로 앱을 하나 만들었는데
0
291
0
비전공 국비수료생이 볼 수 있을까요?
0
383
1
로드맵으로 프론트엔드 전향이 가능할까요?
0
402
1
페이지네이션 랜더링 질문
0
440
1
요즘시장에 MERN스택으로 개발하는 프로젝트가 많이 있는지 궁금합니다.
0
443
1
서버공부 (Java spring)
0
427
0
신규 강의가 비슷하게 나왔던데
0
427
0
다이아그램 자료 안뜨는데요.
0
420
0
예비 UX / UI 디자이너 입니다. 앱관련 조사가 필요해서 글 올려요.
0
370
0
업데이트로 인해, Adroid 설정부분이 조금 다릅니다.
1
439
1
선생님.. 구현하고자 하는게 있는데 도저히 구글링해도 어떻게 손을 봐야할지 모르겠습니다..
0
522
2
_song.html 세션 문제?
0
505
2