인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

jhreplay.lee님의 프로필 이미지
jhreplay.lee

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

toRef & toRefs 기초부터 활용까지 한방에!

ref와 computed의 차이를 잘 모르겠어요

해결된 질문

작성

·

621

0

안녕하세요.

이번 강의 실습하다가 수업 내용처럼 preview가 업데이트 안되길래 원인을 찾다보니 아래 부분이 문제였는데요.

// 강사님 코드
const url = computed(() => `/posts/${props.id}`);
const { error, loading, data: post } = useAxios(url);
// 제 코드
const url = ref(`/posts/${props.id}`);
const { error, loading, data: post } = useAxios(url);

지금까지 진행하고 너무 기초적인 질문인 것 같긴한데 computed는 반응형으로 동작하고 ref는 동작하지 않는 이유를 잘 모르겠습니다.

답변 1

2

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 🙂

props.id 가 외부에서 변경되었을때

// 강사님 코드
const url = computed(() => `/posts/${props.id}`);
const { error, loading, data: post } = useAxios(url);

위 코드는 computed로 url을 선언하였기 때문에 props.id 의 변화에 반응하여 url값은 변경(다시 계산)됩니다.

하지만

// 제 코드
const url = ref(`/posts/${props.id}`);
const { error, loading, data: post } = useAxios(url);

위 코드는 단순히 초기값을 할당한 것이기 때문에 props.id 의 값에 url값은 변경(다시 계산)되지 않습니다.

위 설명을 듣고 이해가 어렵다면 computed 학습을 다시한번 살펴보시는 것을 권장드립니다. 💪

jhreplay.lee님의 프로필 이미지
jhreplay.lee

작성한 질문수

질문하기