6.React Props를 활용하여 간단한 웹페이지 제작

그동안 배운 기술을 활용하여 간단한 판매사이트를 구현해보겠습니다.

 

우선 Props를 활용하기 위해 가장 상위가 되는 App.jsx에 변수들을 넣어주도록 합니다.

 

파일명 - App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import axios from 'axios';
import SellList from './SellList'
function App() {

  return (
    <div style={{ padding: 30}}>
      <SellList
        img={["//thumbnail7.coupangcdn.com/thumbnails/remote/230x230ex/image/vendor_inventory/1040/a361ea9f2bcd71c916b1eca1b90844f009a9d4d7f40f681978033fdc1163.jpg","//thumbnail6.coupangcdn.com/thumbnails/remote/230x230ex/image/vendor_inventory/da86/f3d462666c6828c0e15a95d83191ed9f49323aafe6b50ab3bba1bfb2e849.jpg","//thumbnail9.coupangcdn.com/thumbnails/remote/230x230ex/image/vendor_inventory/8020/1a48f0944dc09e0992c23a519a62165dac58a421909f7876f84fde347ec1.jpg"]}
        name={['신라면 120g, 10개','육개장 사발면 86g, 6개','짜파게티 140g, 5개']}
        count={[10,6,5]}
        price={[7800,4680,4280]}
        eaPrice={[780,780,856]}
        tage="내일(월) 도착 보장"
      />
    </div>
  )
}

export default App

 

다음은 판매 페이지에서 부모 컴포넌트에서 props로 만들어주었던 변수를 활용하여 데이터를 받아줍니다.

 

파일명 - SellList.jsx

import './SellListCss.css'

function SellList({
    img,
    name,
    count,
    price,
    tage,
    eaPrice
}) {
    return (
        <div>
            <div>
                {img.map((item, i) => (
                    <div key={i} className="div">
                        <img alt="" src={item} />
                    </div>
                ))}
            </div>
            <div>
                {name.map((item, i) => (
                    <div key={i} className="div">
                        <p> {item} </p>
                    </div>
                ))}
            </div>
            <div>
                {price.map((item, i) => (
                    <div key={i} className="price">
                        <h3> {item.toLocaleString()}원</h3>
                    </div>
                ))}
            </div>
            <div>
                {eaPrice.map((eaPrice, i) => (
                        <div key={i} className="div">
                            <p>(1개당 {eaPrice}원)</p>
                        </div>
                 ))}
            </div>
            <div className="tage">
                {tage}
            </div>
            <div className="tage">
                {tage}
            </div>
            <div className="tage">
                {tage}
            </div>
        </div>

    )
}

export default SellList;

 

다음은 판매페이지에서 사용할 css파일을 만들어주도록 합니다.

 

파일명 - SellListCss.css

.div {
    float: left;
    width: 33%;
}

.price {
    float: left;
    width: 33%;
    color: red;
    align: left;
}

.tage {
    float: left;
    width: 33%;
    color: green;
}

 

비록 완성적이진 않아도 여태 배운 것 들을 직접 써서 만들어본다는 것에 의의를 두었습니다.