Next

Next 13 컴포넌트에 데이터를 전해주려면 props

하림회사 2023. 5. 25. 20:21
const CartItem = ({cart}:any) =>{ //자식
    
    return(
        <div className="cart-item">
            <p>{cart}</p>
            <p>$40</p>
            <p>1개</p>
        </div>
    )
}

const page = () => { //부모
    let cart = ['Tomatoes', 'Pasta','김치찌게']
    return (
        <div>
        <h4 className="title">Cart</h4>
        <CartItem cart={cart[0]}/>
        <CartItem cart={cart[1]}/>
        <CartItem cart={cart[2]}/>
        {cart.map((item,i)=> (
            <CartItem cart={item} key={i}/>
        ))}

      </div>
    );
};

이런식으로 사용 가능하다.

 

부모가 자식한테 데이터 전송은 가능하다

자식이 부모한테 데이터 전송은 불가능 (패륜 불가능.)

 

파라미터 문법 검색 해보기.