props

props

1. props

 - React 라이브러리를 사용하는 컴포넌트 기반의 웹 애플리케이션에서 사용되는 용어

 - React 컴포넌트는 함수 or 클래스 형태로 정의될 수 있으며, 이들은 속성을 받아들일 수 있음

 - 이러한 속성들은 컴포넌트 내부에서 사용되어, 컴포넌트의 동작 or 표시 내용을 결정하는데 활용

 

2. 사용방법

 - ProductListItem.js

import React, { useState } from "react";

function ProductListItem(props) {
  // props를 사용하여, 데이터 전달
  const imgNo = props.imgNo;
  const productName = props.name;
  const productPriceFormatted = props.productPriceFormatted;
  return (
    <>
      <div
        style={{
          display: "inline-flex",
          flexDirection: "column",
          gap: "10px",
        }}
      >
        <img src={`https://picsum.photos/id/${imgNo}/400/400`} />
        <div
          style={{
            textAlign: "center",
            fontWeight: "bold",
            color: "#454545",
          }}
        >
          {productName}
        </div>
        <div style={{ textAlign: "center" }}>{productPriceFormatted}</div>
      </div>
    </>
  );
}

export default ProductListItem;

 

 - App.js

import ProductListItem from "./ProductListItem";

const App = () => {
  return (
    <>
      <div style={{ display: "flex", gap: "10px" }}>
        <ProductListItem
          imgNo={201}
          name="MAC BOOK AIR"
          productPriceFormatted="1,140,000"
        />
        <ProductListItem 
          imgNo={1}
          name="MAC BOOK PRO"
          productPriceFormatted="3,320,000"/>
        <ProductListItem 
          imgNo={2}
          name="MAC BOOK PLUS"
          productPriceFormatted="4,340,000"/>
      </div>
    </>
  );
};

export default App;

 

 - 결과