React - 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

React에서 부모에서 자식으로 자식에서 부모로 데이터 전달할수 있습니다. 부모에서 자식은 Props를 이용해서 데이터를 전달할 수 있고, 자식에서 부모 데이터 전달은 부모 컴포넌트에서 데이터를 변경하는 함수를 Props로 전달하고 자식컴포넌트에서 전달받은 함수를 호출해서 데이터를 변경할 수 있습니다. 아래 예시를 보면서 알아보도록 하겠습니다. 부모➡️자식 데이터 전달하기 부모 컴포넌트 부모 컴포넌트에 name Props를 이용해서 Child 컴포넌트에 전달합니다. import { useState } from "react"; import Child from "../../components/Child"; export default function Dev() { const [name, setName] = u..

• format_list_bulleted Develop/React
• · 2023. 9. 15.
• textsms

Vue3 + Typescript Props interface 사용법 기본값 설정

Props는 자식 컴포넌트에게 데이터를 전달할 수 있는 방법입니다. Vue3에서 타입스크립트를 이용해서 사용할 수 있습니다. Vue3에서 없이 Props 사용하기 export default { props: { name: { type: String, }, age: { type: Number, }, }, }; 으로 Props 사용하기 const props = defineProps({ name: { type: String, }, age: { type: Number, default: 20, }, }); 이 방법으로 사용할 수 있지만, 타입스크립트를 쓰는 의미가 없어서 다른 방법도 있습니다. interface로 타입 정의 하고 Props 사용하기 interface로 타입을 선언하과 defineProps 제네릭타입..

• format_list_bulleted Develop/Vue
• · 2023. 8. 25.
• textsms

Vue3 부모에서 자식 데이터 주고 받기 - Composition API

Vue는 부모 자식 컴포넌트 간의 데이터를 서로 전달할 수 있습니다. 양방향 데이터 바인딩이 가능한 장점이 있습니다. 부모에서 자식으로는 Props 옵션을 이용해서 전달하고, 자식에서 부모는 Emit 이벤트를 이용해서 전달합니다. Props와 이벤트를 이용하면 부모 / 자식 관계에서 데이터를 서로 주고받을 수 있습니다. 부모 ➡️ 자식 데이터 전달 1. 부모 컴포넌트에서 데이터 생성 const userName = ref('superman'); 2. 자식 컴포넌트로 데이터 전달 3. 자식 컴포넌트에서 Props 설정 {{ message }} 자식 ➡️ 부모 데이터 전달 1. 자식 컴포넌트에서 이벤트 생성 후 호출 const emit = defineEmits(["update"]) emit("update", ..

• format_list_bulleted Develop/Vue
• · 2023. 8. 15.
• textsms

Vue Props 양방향 바인딩 하는 방법 sync, v-model

Vue에서 자식 컴포넌트에게 데이터를 전달할때, props 속성을 사용합니다. Vue 부모➡️자식 / 자식➡️부모 데이터 전달하기 Vue에서 부모에서 자식으로 데이터 전달, 반대로 자식에서 부모로 데이터 전달이 가능합니다. 부모에서 자식으로 데이터 전달은 props를 이용해서 전달하고, 자식에서 부모 데이터 전달은 $emit을 powerku.tistory.com 프로그램을 개발하다 보면 자식에게 전달한 데이터를 변경하고 싶을 때가 발생하는데요. 자식 컴포넌트에서 props를 직정 변경하게 되면 오류가 발생합니다. Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'msg' props로 전달한 데이터를 변경하는 방법에 대하여 Vu..

• format_list_bulleted Develop/Vue
• · 2023. 7. 31.
• textsms

Vue 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

Vue에서 부모에서 자식으로 데이터 전달, 반대로 자식에서 부모로 데이터 전달이 가능합니다. 부모에서 자식으로 데이터 전달은 Props를 이용해서 전달하고, 자식에서 부모 데이터 전달은 $emit 이벤트를 이용하여 데이터를 전달합니다. 간단한 예시로 알아보겠습니다. 아래 글은 Options API 방식 입니다. Composition API 방식은 다음 글을 참조 바랍니다. Vue3 Props와 Emit 이벤트 이용해서 부모에서 자식 데이터 주고 받기Composition API Vue는 부모 자식 컴포넌트 간의 데이터를 서로 전달할 수 있습니다. 양방향 데이터 바인딩이 가능한 장점이 있습니다. 부모에서 자식으로는 Props 옵션을 이용해서 전달하고, 자식에서 부모는 Emit powerku.tistory.c..

• format_list_bulleted Develop/Vue
• · 2023. 5. 16.
• textsms

React - props를 이용하여 데이터 전달하기

리액트 props를 이용하여 데이터를 전달하여서 엘리먼트에 사용하는 방법입니다. 먼저 Hello라는 컴포넌트를 간단하게 만듭니다. function Hello() { return Hello } export default Hello 위와 같이 Hello 컴포넌트를 만들고 Hello 컴포넌트를 렌더링 하게 되면 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Hello 글자가 나옵니다. 이제 Hello 컴포넌트 네임 props를 전달하여서 Hello 컴포넌트에 이름을 넣어보겠습니다. function Hello(props) { return Hello {props.name} } export default Hello..

• format_list_bulleted Develop/React
• · 2023. 1. 10.
• textsms