이제 vuetify를 이용해서 vue 를 사용한지 1년은 된 것 같다. 그런데도 새로운 것을 배우게 된다. 그냥 무의식적으로 css 설정에서 deep (vue2 에서는 v-deep 로 알고 있다.) 를 사용했는데, 이것을 사용하는 이유를 인식하게 되었다. 난 이용도를 제대로 인식하지 못하다보니 deep 설정이 필요 없는 곳에도 난발하고 있었다.
vue에서 일반적으로 css 스타일을 지정할 때 <style scope> 처럼 scope 라는 구문으로 css 범위를 해당 파일로 제한하게 된다. vue3 를 기준으로 html 태그를 추가하면 자동으로 태그 옆에 data-v-f2c7905d 같은 랜덤함 attribute 가 동일한 파일범위에 같은 값으로 추가된다. 그래서 css 설정에 보면 자동으로 [data-v-f2c7905d] 같은 css selector 가 자동 추가된다. 이렇게 추가되다보면 현재 작업하는 파일과 다른 파일로 분리된 vue 컴포넌트는 다른 랜덤 data-v-XXXXXX 가 생성된다. 그러면 현재 범위를 기준으로 하위 컴포넌트의 스타일을 변경하지 못한다. 이러한 제한을 벗어나게 하기 위해 deep 구문을 이용해서 .test :deep([type="text"].v-field__input)
으로 deep 를 설정하게 된다. deep 내에 둘러싸인 부분은 하위 컴포넌트를 접근하기 위한 css selector 조합인 것이다. 어째든 이렇게 deep 로 둘러싸인 부분은 자동으로 [data-v-XXXXXX] 같은 것이 추가되지 않는 것 같다.(정확한 동작 원리는 모르겠지만 내 테스트로는 이렇다.)
대충 내 느낌으로는 왼쪽 처럼 사용하면 오른쪽 처럼 자동으로 css selector 가 변화는 느낌이다.
.test :deep([type="text"].v-field__input) => .test [data-v-f2c7905d] [type="text"].v-field__input
.test ([type="text"].v-field__input) => .test [type="text"].v-field__input[data-v-f2c7905d]
[type="text"].v-field__input 부분이 하위 컴포넌트 부분이라면 [data-v-f2c7905d] 가 아닌 다른 랜덤한 번호가 붙기 때문에 의도대로 css 셀레팅이 되지 않을 것이다. 이렇기 때문에 deep 를 사용해서 자동 추가를 막는 것 같다.
어째든 하위 컴포넌트 속성을 selector 하는 부분이 없다면 이 구문이 필요 없는 것이었다. 내가 vuetify 를 이용하고, 이 컴포넌트들의 디자인을 더 작게 만들일이 많다보니 deep 를 많이 사용했던 것이다.
이것을 오늘에서야 인식하게 되었다니, 나도 참 대충 프로그래밍 짜는 것 같아서 부끄럽다.