• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

$root.$data와 $ref의 사용에 대해서

19.11.30 14:05 작성 조회수 385

0

Vue가 너무 배우고 싶어 방황하던 중 제로초님의 강의를 발견하고,
꾸준하게 들어서 이제 $root.$data로 부모컴포넌트의
데이터에 접근하는 것을 해보고 있는데요, 

이 부분을 보니까 1장 구구단 게임에서 ref로 접근했던 것이생각났습니다. 

3가지 의문점이 생각났습니다.
아무래도 리액트로 실무를 하고 있어서 vue도 리액트 식으로 이해하려고 되네요

1. ref와 root 접근은 움직임적, 활용면에서 어떻게 다른가

리액트로 따지면 root 같은 것이 없는거 같은데요.
굳이 하자면 spread operator로 부모의 불특정 props를 
전부 넘겨주고 그것을 readOnly로 활용하는 방법은 가능 할 것 같습니다.
어쨌거나 ref와 root 모두 readOnly라고 이해가 되었는데 맞는가요?
그렇다면 굳이 둘을 나눠서 사용하는 이유는, ref는 HTML의 ID처럼 특정 노드를 지정하는 
root 접근이라고 보면 될런지요. 


2. 리액트에서 ref를 통해 state등을 변경하는 것은 
라이프사이클을 벗어나는 행위라서 권장하지 않는다고 알고 있는데, Vue의 ref와 root는 각각 어떠한가

nested Object의 경우 랜더가 안된다고 하셨는데 그건 리액트도 마찬가지라고 이해가 갔습니다.
그 경우엔 리액트나 뷰 모두 set을 해줘서 랜더를 달리게 해주는 것 같군요. 

그런 특별한 데이터가 아니라 일반적인 원시형 props 데이터의 수정에 대해서 Vue는 어떠한가요?? 

리액트는 제 기억으로는 setState를 해주지 않는 이상 데이터에 직접 접근해서 변경하는 것은
라이프 사이클이 안움직였던 것 같은데요. 
그리고 그건 라이프사이클을 벗어나기 떄문에 직접 변경은 하지말라고했던것 같아요.
Vue는 그런 룰은 없나요??

3. 자식컴포넌트에서 부모컴포넌트를 수정하면 부모로부터 시작해서 자식들도 랜더링이 다시 될텐데 

그보다는 자식의 data(리액트라면 state)변화를 부모에게 전달하는 방식을 하면 좋을 것 같습니다. 

이런 경우 리액트라면 부모에서 setState가 포함된 함수를 자식에게 건내줘서 자식의 이벤트와 연결시키는데

Vue에서는 이런 방식이 가능한지, 필요한지, 등등 알고 싶습니다. 

잘 부탁드리겠습니다. 

답변 3

·

답변을 작성해보세요.

1

1. ref는 HTML "태그"를 직접 선택하는 것이고, root는 부모 "컴포넌트"를 선택하는 것입니다. 완전히 다릅니다.

2. 리액트와 마찬가지입니다. Vue에서는 ref가 함수가 아니기 때문에 ref를 통해 state를 바꿀 수 없습니다. root는 컴포넌트이기 때문에 바꿔도 됩니다.

3. 자식의 data 변화를 부모에게 전달하는 것과, 부모 컴포넌트를 수정하는 것이 어떤 관계가 있는지 모르겠습니다. Vue에서는 root의 데이터를 바꾸면 됩니다. Vuex같은 것을 사용해도 되고, 이벤트 버스를 사용해도 되고요.

0

3. 어차피 어떤 수를 쓰든 자식에서 부모 데이터를 바꾸면 자식도 다시 렌더링됩니다. $root로 하든 다른 걸로 하든요. 좋지 않은 패턴은 맞는게 데이터를 수정하는 코드가 파편화되어서 관리하기 힘들어집니다. 데이터 수정하는 코드는 vuex처럼 한곳에 몰아두는 게 좋습니다.

0

Guroom Som님의 프로필

Guroom Som

질문자

2019.12.01

답변 감사합니다. 

1,2 . ref, root의 사용방식이 이해가 좀 미숙했던 것 같습니다. 이 부분은 반복으로 숙지하겠습니다.

덕분에 정리가 좀 되었습니다.감사합니다.

3. 제 표현이 좋지 않았던 것 같습니다. 자식에서 부모 $root로 접근해 데이터를 수정하면
부모가 랜더링이 일어날 것이고 , 자식 본인도 랜더링이 되지않냐는 말이었습니다.
잘은 모르지만 자식에서 root에 접근한다는 것이 좀 꺼림직해서 root를 쓰는 것이 퍼포먼스 측면에서
안좋은 패턴인지를 여쭈어 보고 싶었습니다. 

말씀하신대로 이 부분은 Vuex를 통해서 애초에 상위 컴포넌트에서 관리하면 좋을 것 같습니다. 
질문을 올리고 나서 Vuex나 이벤트 버스를 봐서 아차 싶었습니다. 

이 부분은 추가적으로 공부와 강의 수강을 통해서 이해를 다시 해보도록 하겠습니다.

답변 정말 감사합니다. 많은 배움 받고 있습니다.