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