185 v-dialog eager 렌더링
source: categories/study/vue-experiance/vue-experiance_9-99_86.md
185 v-dialog eager 렌더링
이슈
재발부요청 페이지 최초 진입 -> 현장 다른걸로 선택 후 -> 공종명 클릭시 선택된 공종명 초기화 안되는 이슈
원인 및 해결
- 페이지 최초 진입시 팝업이 렌더링이 안되는 상황
- 선택된 공종명 <- 이게 화면엔 렌더링이 안되었던 상황
- 그로인해 현장을 바꾸고, 공종명 팝업을 열었을 때, 공종명 팝업이 최초 렌더링 되면서, 선택된 공종명이 다시 선택안된 상태로 초기화가 되어야하는데, (가상돔과 리얼돔 비교하고 다를때 재렌더링되는 그런식으로 되어야 하는데, 애초에 리얼돔에 없는 상황이므로, 비교군이 없으므로, 상태가 제대로 초기화가 안되었던 것 같음
- 그래서 왜 최초에 렌더링이 안되었는지 원인을 파악해봄
- Vuetify v-dialog에 기본 내재되어있는 기능 // v-dialog 내부 컨텐츠는 v-dialog가 활성화가 안되었으면 v-if를 사용해 렌더링을 안하도록 설계되어있는 거 같음. (<!——>)
- 그렇기 때문에 페이지 진입시 최초 렌더링이 안되어서 리얼돔에 정보가 없으니까 가상돔과 비교할 대상이 없었던 것
- V-dialog에 eager라는 속성을 true로 설정해, 최초 렌더링을 강제 (그러나 실제 DOM상에는 없음, <!——> 주석표시도 없음. 렌더링하고 따로 빼는거같아보임)
- 여튼 리얼돔에 있는거기 때문에 비교군 존재하므로 key값이 바뀌면서 비교대상이 있으니까 재렌더링, 상태 초기화를 제대로 하는 듯.
- 이런식으로 해결
- Vuetify v-dialog가 내부 컨텐츠를 팝업이 활성화되지 않았을 땐, v-if로 렌더링 자체를 안하는 이유는
- 팝업이 화면에 뜨지도 않았는데 내부 컨텐츠를 랜더링하는 것은 리소스 낭비이기 때문에, 이렇게 설계해놓은 듯.