toRef 예시와 관련하여

Question

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   안녕하세요 짐코딩님, 제가 어디서부터 어떻게 이해를 잘 못하고 있는건지 모르겠으나, 어느 순간부터 머리가 꼬여 정리가 되지 않아 질문 남깁니다 ㅠㅠ ,,   현재 코드를 보면 설명해주신 듯이   PostDetailView에서 const idRef = toRef(props, 'id'); const { isOdd } = useNumber(idRef ); 를 통해 반응형으로 넘겨주는데요,   반응형으로 넘겨주는 이유를 모르겠습니다. 어차피 composable 함수인 number 내에서 unref로 까서 사용하고, compute로 다시 반응형을 return해준다고 생각되는데요 ,,   왜 반응형을 넘겨주지 않으면 정상적으로 동작하지 않는 건가요 ..!?

짐코딩 · Answer

안녕하세요 :) 음... 우선 comuted(콜백함수) 는 콜백함수내의 반응형 변수의 값이 변경되면 값을 다시 할당(계산)하는데요! import { computed, unref } from 'vue'; export const useNumber = number => { const isOdd = computed(() => unref(number) % 2 === 1); const isEven = computed(() => !isOdd.value); return { isOdd, isEven, }; }; 강의 예제처럼 number 가 만약 20 이라면 isOdd 는 false 일거에요. 그런데 만약에 number 가 19 로 바뀐다면 isOdd 는 true 가 재할당되어야 하는데 그대로 false 일거에요 왜냐하면 number 가 반응형 변수가 아니기 때문이죠! ㅎㅎ 그래서 반응형 변수를 넘김으로써 computed 값을 재할당할 수 있게한거에요. 그 수단으로 toRef 함수를 사용한거고요~! computed 에 대해 한 번 고민해보시면 꼬인 부분을 푸실 수 있을 거 같아요~! ㅎㅎ