인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.
작성
·
98
0
다름은 아니고 vue2.7 버젼을 사용하고 있습니다. 오늘 실무에서 업무를 진행하다. 한가지 의구심이 들어서 질문을 여쭈고자 합니다.
부모 에서 ref 반응형 데이터가 존재하는데 이 반응형 데이터를 바로 아래 자식으로 props를 넘겨주었고 이 넘긴 props를 watch를 사용해서 변화가 있을때 어떤 로직을 처리하겠다.로 구현을 했습니다. 구현과정에서 컴포넌트를 나눌 필요가 생겨서 자식안에 자식을 하나 더 만들고 최상위 부모로 부터 받은 props를 그 최하위 자식에게 전달 후 최하위 자식에서 watch를 통해 어떤 로직을 처리하겠다. 로 구현을 했을때 최하위 자식에서 watch가 정상적으로 props의 변화를 인지 하지 못하는 이슈가 있었습니다. 하지만 해당 props값을 렌더링 했을때는 최하위 자식에서도 정상적으로 변했습니다. 결국 최하위 자식에서 deep과 immediate 옵션을 설정해 해결했는데 왜 이런식으로 동작했는지 검색을해도 나오지 않아서 궁금해서 여쭙고자 합니다. 여기서 ref 데이터 타입은 object이고 초기값은 null 입니다. 추가적으로 최하위 자식은 항상 렌더링 되는것이 아닌 v-if v-else가 걸려있습니다.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
wnwlghdqkqh님의 질문에 대해 Vue 2.7에서 props와 watch를 사용하는 상황에 대해 설명드리겠습니다.
Vue에서 props로 넘겨받은 객체를 관찰할 때, Vue는 shallow watch만을 기본으로 합니다. 즉, props로 받은 객체의 최상위 레벨의 변화만을 감지하고, 객체 내부 속성의 변화는 감지하지 못합니다. 따라서, 최하위 자식 컴포넌트에서 객체 내부 속성의 변화를 감지하려면 deep 옵션을 true로 설정해야 합니다. 이를 통해 객체 내부까지 깊은 감시(deep watch)를 활성화할 수 있습니다.
immediate 옵션을 사용하는 경우는, 컴포넌트가 생성될 때 바로 watch 핸들러를 실행시키고 싶을 때 활용합니다. 즉, 컴포넌트가 마운트되자마자 바로 props의 현재 상태에 대해 반응하고 싶을 때 유용합니다.
wnwlghdqkqh님이 언급하신 바와 같이, 최하위 자식 컴포넌트에서 v-if, v-else를 사용하는 경우 조건에 따라 컴포넌트가 렌더링 되거나 되지 않을 수 있습니다. v-if에 의해 렌더링되지 않는 상태에서는 해당 컴포넌트의 watch가 등록되지 않기 때문에 props의 변화를 감지할 수 없습니다. 이 경우, 컴포넌트가 렌더링 될 때 immediate 옵션을 활용하여 초기 상태에 대해서도 반응할 수 있도록 설정하는 것이 해결 방법 중 하나가 될 수 있습니다.
정리하자면, deep: true 옵션은 객체 내부의 속성 변화까지 감지하기 위해, immediate: true 옵션은 컴포넌트가 생성되자마자 바로 반응하여 현재 상태를 확인하고자 할 때 사용됩니다. 따라서, wnwlghdqkqh님이 구현하신 상황에서 이와 같은 방식으로 문제를 해결할 수 있었던 것입니다.
추가적으로, Vue의 공식 문서나 해당 특징에 대해 더 깊이 이해하고자 하시면 Vue 공식 문서를 참고하시는 것이 좋습니다.