React, Vue 및 Svelte: 구조 분해 소품 비교

소품 파괴...

ES6+, Object 및 JavaScript에 관해서는 Destructuring 방법을 사용할 수 있으며 JavaScript이기 때문에 동일하게 작동합니다!

확인해보세요 🚀

반응하다

Link

// Parent Component
<ChildComponent {...user} />
// or
<ChildComponent user={user} />

const Component = ({id, name, lastname}) => {
  return <div id={id}>{name}{lastname}</div>
}

뷰

Link

const props = defineProps({
  user: Object
})
let { id, name, lastname } = props.user;
<template>
<div>{{ id }} {{ name }}</div>
</template>

날씬한

Link

// Parent Component
<ChildComponent {...user} />

// Child Component
export let name;
export let lastname;
export let id;

<div>{name} {lastname} {id}</div>