강의내용과 관련 없는 질문드립니다.

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

스토어 속성 모듈화 방법

작성

226

1번질문: dom에 접근해야할 상황이 올경우 ref를 사용해도 되나요.. ref는 vue 사용의 목적에 어긋나기때문에 가능하면 사용하지 말라고하는데 궁금합니다.

2번질문: dom에 접근시 this.$el과 ref를 사용해서 접근하는게 있는데 2개의 차이점은 뭔가요?..

3번질문:

ex)

<ul>
      <li>
        a
      </li><li>
        a
      </li><li>
        a
      </li><li>
        a
      </li><li>
        a
      </li><li>
        a
      </li><li>
        a
      </li><li>
        a
      </li><li>
        a
      </li><li>
        a
      </li>
</ul>
이런식으로 ul li를 한번에 선택하고싶으면 
this.$el.querySelectorAll('ul li') 이런식으로 접근해도
되는지 궁금합니다.
dom접근시 어떤방법으로 접근하는게 제일 괜찮은지 알려주셨으면
좋겠습니다.

es6 javascript vuex vuejs

답변 2

지소라

안녕하세요 기효님! 저도 찾아보다가 어떤분이 쓰신 글에서 refs를 권장하지 않는다는 말을 보고 사실 굉장히 의아했었거든요. refs를 권장하는 걸로 아는데 쓰지 말라고 하니.... 물론 믿을만한 출처인지는 모르겠지만 말이죠. 이 글에 있어요. https://devriver.tistory.com/31
이분이 참고로 남겨주신 원문글에 따르면 사실 이 원문글에서도 queryselector보다 refs가 훨씬 간결하기 때문에 refs를 권장하고 있는데, 제가 첨부한 글이 vue refs라고 검색하면 상위에 떠서, 아직 개념이 확실하지 않은 분들께(저도 한때.....ㅎㅎㅎ) 혼란을 주는것 같습니다

장기효(캡틴판교)

지식공유자

안녕하세요 admin님, 화면 조작과 관련하여 좋은 질문을 주셨네요. 바로 답변드리겠습니다 :)

1번질문: dom에 접근해야할 상황이 올경우 ref를 사용해도 되나요.. ref는 vue 사용의 목적에 어긋나기때문에 가능하면 사용하지 말라고하는데 궁금합니다.

답변) ref가 뷰의 사용 목적에 벗어난다라는 정보는 어디서 얻으셨을까요? 제가 알기로는 뷰에서 직접 DOM 조작을 하려면 ref를 사용해야 한다고 알고 있습니다. 뷰에서 DOM을 조작할 때 "디렉티브"라는 개념을 사용하고 있는데요. 해당 개념은 뷰가 처음이 아니라 초기 앵귤러 버전부터 사용했습니다. 앵귤러에서도 DOM 요소에 직접 접근하는 대신 프레임워크에서 제공하는 디렉티브나 속성들을 활용하라고 권고합니다.

2번질문: dom에 접근시 this.$el과 ref를 사용해서 접근하는게 있는데 2개의 차이점은 뭔가요?..

답변) $el 속성은 인스턴스의 최상위 DOM 요소를 가리킵니다. 반면에 ref 속성은 특정 DOM 요소를 지정해서 해당 DOM 정보를 취득할 수 있습니다. ref로 해결하실 수 있는 것을 굳이 `$el`을 이용해서 접근하실 필요는 없을 것 같아요.

3번질문:

답변) 앞의 질문들과 중복되는 내용인 것 같습니다. ref로 접근하시는 것을 추천드리고 아래에 영상 링크 하나 첨부 드릴테니 세션2와 세션4를 참고해보시면 도움이 될 것 같네요. 참고로 ref 속성에 대한 내용은 "Vue.js 완벽 가이드"의 차트 모듈화에서도 다루고 있으니 관심 있으시면 한번 살펴보시면 좋을 것 같습니다 :)

https://www.youtube.com/watch?v=wU8Y07vgUbQ

강의 수강해주셔서 감사합니다.

인프런 커뮤니티 질문&답변

강의내용과 관련 없는 질문드립니다.