Props

Props (속성)

부모 컴포넌트에서 자식 컴포넌트로 전달하기 위한 데이터 properties 의 줄임말

외부에서 전달되는 매개변수. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.

이것이 React 컴포넌트 간에 정보를 주고받는 주요 메커니즘 중 하나입니다. 부모 컴포넌트는 자식 컴포넌트에게 props를 통해 데이터를 전달하고, 자식 컴포넌트는 이를 활용하여 화면에 정보를 표시하거나 특정 동작을 수행할 수 있습니다.

React에서는 props를 통한 단방향 데이터 전달이 주요한 패턴입니다.

단, 상태 관리 라이브러리인 Redux, Context API 등을 사용하면 컴포넌트 간의 데이터 흐름을 조금 더 유연하게 관리할 수 있습니다.

자식 컴포넌트에서 부모 컴포넌트로 데이터를 넘기는 법 - 부모 컴포넌트에서 props 로 함수를 내려주고, 자식 컴포넌트에서 그 함수를 호출하면서 부모 컴포넌트로 데이터를 전달 할 수 있습니다.

실습 코드

•

실습1 : “상품 상세 UI 만들기 - props”

•

실습2 : “상품 목록 UI 만들기”

실습1

“상품 상세 UI 만들기 - props”

“상품 상세 UI 만들기 - props” 에서는 사전 실습 후 이어서 실습합니다. 사전 실습 - State 사전 실습에서 자식 컴포넌트에서 정의한 상품 정보 객체(product) 를 부모 컴포넌트에서 정의하고 이를 props 로 전달하는 실습을 해봅니다.

사전 실습

3단계

작업할 파일

•

componets/ProductDetail.jsx

•

App.js

컴포넌트 구조

•

App

◦

ProductDetail

App, ProductDetail 컴포넌트 - props 사용

componets/ProductDetail.jsx

import React, { useState } from 'react'


const ProductDetail = ({ product }) => {        // ✅ props ➡ { product } 👩‍🏫 객체 구조분해할당

    // state 추가
    const [quantity, setQuntity] = useState(1)

    // product{} ➡ App.js 이동

    // 최종 가격 계산
    const totalPrice = product.price * quantity

    // 이벤트 정의 - 증가
    const onIncrease = () => {
        console.log(quantity);
        setQuntity(quantity + 1)
    }
    
    // 이벤트 정의 - 감소
    const onDecrease = () => {
        console.log(quantity);
        setQuntity(quantity - 1)
    }
  
    return (
        <div className='product-detail'>
            <div className="item img">
                <img src={product.img} alt={product.name} />
            </div>
            <div className="item info">
                <div className="title">
                    <h1>{product.name}</h1>
                </div>
                <p>
                    <span className='txt-pt'>INFO</span><br />
                    -편안한 착용이 가능한 폴라 디자인 <br />
                    -체형 커버가 가능한 베이직한 실루엣 <br />
                </p>
                <p>
                    <span className="txt-pt">Color & Size</span> <br />
                    Black, Navy, Red <br />
                    85, 90, 95, 100, 110 <br />
                    - 어깨 53, 가슴 59, 암홀 23, 소매 62, 총장 68 <br />
                    (측정 방법에 따라 1~3cm 오차가 있을 수 있습니다) <br />
                </p>
                <span className='line-lg'></span>
                <div className="text-group">
                    <div className="item">
                        <span className='txt-pt'>판매가</span>
                    </div>
                    <div className="item">
                        <span className='txt-pt'>{product.price.toLocaleString()} 원</span>
                    </div>
                </div>
                <div className="text-group">
                    <div className="item">
                        <span>배송비</span>
                    </div>
                    <div className="item">
                        <span>3,000</span> 원
                    </div>
                </div>
                <span className="line-lg"></span>
                <div className="text-group">
                    <div className="item">
                        <span>Color</span>
                    </div>
                    <div className="item">
                        <select name="color" id="color">
                            <option value="Black">Black</option>
                            <option value="Navy">Navy</option>
                            <option value="Red">Red</option>
                        </select>
                    </div>
                </div>
                <div className="text-group">
                    <div className="item">
                        <span>Size</span>
                    </div>
                    <div className="item">
                        <select name="color" id="color">
                            <option value="85">85</option>
                            <option value="90">90</option>
                            <option value="95">95</option>
                            <option value="100">100</option>
                            <option value="110">110</option>
                        </select>
                    </div>
                </div>
                <div className="text-group">
                    <div className="item">
                        <span>수량</span>
                    </div>
                    <div className="item flex">
                        <input type="text" className='quantity' value={quantity} min={1}  max={100} />  {/* value 를 state 로 변경 */}
                        <button className='btn btn-xs' onClick={ onIncrease }>+</button>    {/* 이벤트 추가 */}
                        <button className='btn btn-xs' onClick={ onDecrease }>-</button>    {/* 이벤트 추가 */}
                    </div>

                </div>
                <span className="line-lg"></span>
                <div className="text-group">
                    <div className="item">
                        <span className='txt-pt'>최종 가격</span>
                    </div>
                    <div className="item">
                        <span className='txt-pt'>{totalPrice.toLocaleString()} 원</span>
                    </div>
                </div>
                <div className="text-group flex gap-1">
                    <div className="item">
                        <button className="btn btn-lg">구매하기</button>
                    </div>
                    <div className="item flex">
                        <button className="btn btn-lg btn-outline">장바구니</button>
                        <button className="btn btn-lg btn-outline">관심상품</button>
                    </div>
                </div>
            </div>
        </div>
    )
    }

export default ProductDetail
JavaScript
복사

App.js

import logo from './logo.svg';
import './App.css';
import ProductDetail from './components/ProductDetail';



function App() {

  // ✅ 객체 가져옴
  const product = {
      productId : 'p000001',
      name : '베이직 폴라 니트',
      price : 42000,
      quantity : 1,
      img: 'https://i.imgur.com/1vpSkbW.png',
  }
  
  return (
    <div>
      <ProductDetail product={product} />
    </div>
  );
}

export default App;
JavaScript
복사