리액트 Props

React Props Props 는 React 컴포넌트에게 데이터를 전달하는 방법 중 하나입니다 .

Props 는 부모 컴포넌트로부터 자식 컴포넌트로 전달되며 , 컴포넌트 내부에서 변경할 수 없 는읽기 전용 데이터입니다 . Props 를 사용하면 컴포넌트 간의 데이터 전달이 간단하고 유지보수하기 쉬워집니다 . 또한 컴포넌트의 재사용성을 높일 수 있습니다.

props : 부모 컴포넌트가 자식 컴포넌트에게 데이터 전달 시 사용하는 객체

** props는 자식 -> 부모 데잍어 전달은 불가능

 

import React from "react";

// props : 부모 컴포넌트가 자식 컴포넌트에게
//         데이터 전달 시 사용하는 객체
// ** props는 자식 -> 부모 데이터 전달은 불가능 **

const ChildComponent = (props) => {
    return (
        <>
            <ul>
                <li>이름 : {props.name}</li>
                <li>나이 : {props.age}</li>
            </ul>

        </>
    );

}


const PropsEx = (props) => {
    // props 매개변수 : 부모로부터 전달 받은 값이 담겨잇는 객체

    console.log(props.name);

    const menu = {'price1' : 8000, 'price2' : 5000}

    return (
        <>
            <h1>{props.name}</h1>
            <ChildComponent name={props.name} age={props.name == 'jeg' ? 20 : 23} />
            {/* <MenuPrint {...menu}/> */}
            {/*<MenuPrint  돈까스 ={8000} 쫄면 = {5000}/>*/}

        </>
    );
}


const MenuPrint = (props)=> {
    return(
        <>
            <h4>돈까스 : {props.돈까스} , 쫄면 : {props.price2} </h4>
        </>
    )
}

export default PropsEx;