vue3 Compositon API(setup) ref() 객체 값 접근

vue3 Compositon API(setup) 기준 

 

axios를 통해 사원 정보를 받아와 저장하려고 했다.

 

받아온 사원 정보 저장할 변수

const emplyInfo = ref({
  korname: '',
  hiredate: '',
  positionCode: ''
});

 

처음에 시도한 코드

const getEmplyInfo = async () => {
  const GET_EMPLY_INFO = `/member/getEmply`;

  const response = await axiosInstance.get(GET_EMPLY_INFO, {
    params: { emplyNo: emplyNmbr },
  });
  console.log('member', response);
  emplyInfo.korName.value = response.data.data.korName;
  emplyInfo.hireDate.value = response.data.data.hireDate;
  emplyInfo.positionCode.value = response.data.data.positionCode;
};

 

이렇게 하면

 

'Ref<{ korName: string; hireDate: string; positionCode: string; position: string; }>' 형식에 'korName' 속성이 없습니다.

라는 에러가 뜬다.

 

 

---

 

 

ref 함수로 만들어진 참조 변수는 객체의 형태로 값을 저장한다.

emplyInfo 변수는 객체이며 그 안에 value 속성이 있는 것이다.

 

따라서 객체 안에 저장된 속성들에 접근하기 위해서는 emplyInfo.value로 먼저 객체의 실제 값에 접근하고 해당 속성명을 사용해야 한다.

 

수정한 코드

const getEmplyInfo = async () => {
  const GET_EMPLY_INFO = `/member/getEmply`;

  const response = await axiosInstance.get(GET_EMPLY_INFO, {
    params: { emplyNo: emplyNmbr },
  });
  emplyInfo.value.korname = response.data.data.korname;
  emplyInfo.value.hiredate = response.data.data.hiredate;
  emplyInfo.value.positionCode = response.data.data.positionCode;
};