객체로 저장된 배열 props로 보내기

본론

혼자 포트폴리오 사이트를 만들면서 객체를 배열로 만드는 과정에서 자꾸만 에러가 발생해서 그에 대한 해결법을 배워왔습니다.

기존에 에러가 발생한 방법

const arr = [
  {
    icon: "Dashboard",
    label: "Dashboard",
  },
  .
  .
  .
  {
    icon: "Settings",
    label: "Settings",
  },
];

이러한 객체로 저장된 배열이 있다고 가정을 하면,

interface Arr {
  icon: string
  label: string
}[]

const arr: Arr = ref({icon: "", label: ""})

이런식으로 만들었고 Arr이 배열에 기능을 더 이상 할 수 없다고 했습니다.

 

새로배운 방법

const arr = [
  {
    icon: "Dashboard",
    label: "Dashboard",
  },
  .
  .
  .
  {
    icon: "Settings",
    label: "Settings",
  },
];

 

<!-- 바로 template에 사용 가능 -->
<Template v-for="(item, idx) in arr" :key="idx" :data="item"/>

<!-- Template.vue -->
interface Data {
  icon: string
  label: string
}

interface Props {
  data: Data
}

const props = defineProps<Props>();
const { data } = toRefs(props);

이런식으로 사용이 가능합니다.

defineProps는 vue 선언이 필요없이 바로 사용이 가능하고 toRefs는 반응형 객체를 일반 객체로 변환하고, 변환된 일반 객체의 각 속성은 원본 객체(반응형 객체)의 속성이 ref된 것 입니다. 각 개별 ref는 toRef()를 사용하여 생성됩니다.

즉, 객체의 값을 개별로 사용이 가능하게 만듭니다.