[React] 프로젝트 만들기 part2

Reference

이 프로젝트는 코딩애플 리액트 강의를 참고하여 제작되었습니다.

https://codingapple.com/course/react-basic/

---

---

상품 데이터파일 빌드하고 데이터바인딩 합니다.

let data = [
  {
    id: 0,
    title: "White and Black",
    content: "Born in France",
    price: 120000,
  },

  {
    id: 1,
    title: "Red Knit",
    content: "Born in Seoul",
    price: 110000,
  },

  {
    id: 2,
    title: "Grey Yordan",
    content: "Born in the States",
    price: 130000,
  },
];

export default data;

 

src/data.jsx

 

상품데이터를 데이터파일로 관리 하겠습니다.

그러기 위해 파일 하나 추가 합니다.

이렇게 코딩하면 코드가 데이터파일을 잘 읽습니다.

이 데이터가 기존의 더미 데이터를 대신 하게 됩니다.

 

 

 

App.jsx

데이터를 사용하기 위해 임포트 합니다.

import data from "./data.jsx";

 

 

 

데이터를 스테이트로 사용할 것입니다.

유즈스테이트 임포트 합니다.

import { useState } from "react";

 

 

 

데이터를 유즈스테이트로 초기화 합니다.

스테이트지만 인덱스1 즉, 셋슈즈는 지금 필요 없으므로 비워 둡니다.

let [shoes] = useState(data);

 

 

 

기존 더미 데이터에 데이터 바인딩 합니다.

     <div className="d-flex flex-column mb-3">
        <div className="p-2">
          <img
            src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s1.PNG"
            width="80%"
          />
          <h4 className="my-3">{shoes[0].title}</h4>
          <p>{shoes[0].price}</p>
        </div>
        <div className="p-2">
          <img
            src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s2.PNG"
            width="80%"
          />
          <h4 className="my-3">{shoes[1].title}</h4>
          <p>{shoes[1].price}</p>
        </div>
        <div className="p-2">
          <img
            src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s3.PNG"
            width="80%"
          />
          <h4 className="my-3">{shoes[2].title}</h4>
          <p>{shoes[2].price}</p>
        </div>
      </div>

 

 

---

TEST 진행

기존 뷰와 동일하다면 굿잡!

---

Completion

data.jsx

위 파일과 같습니다.

 

 

App.jsx

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import { Link } from 'react-router-dom';
import data from './data.jsx';

function App() {
  let [shoes] = useState(data);

  return (
    <div className="App">
      <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">
            Navbar
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <Link to="/" class="nav-link active" aria-current="page">
                Home
              </Link>
              <Link to="/" class="nav-link active" aria-current="page">
                Detail
              </Link>
              <Link to="/" class="nav-link active" aria-current="page">
                about
              </Link>
            </div>
          </div>
        </div>
      </nav>

      <div className="main-bg"></div>

      <h1 className="my-5">Nike shop</h1>

      <div className="d-flex flex-column mb-3">
        <div className="p-2">
          <img
            src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s1.PNG"
            width="80%"
          />
          <h4 className="my-3">{shoes[0].title}</h4>
          <p>{shoes[0].price}</p>
        </div>
        <div className="p-2">
          <img
            src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s2.PNG"
            width="80%"
          />
          <h4 className="my-3">{shoes[1].title}</h4>
          <p>{shoes[1].price}</p>
        </div>
        <div className="p-2">
          <img
            src="https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s3.PNG"
            width="80%"
          />
          <h4 className="my-3">{shoes[2].title}</h4>
          <p>{shoes[2].price}</p>
        </div>
      </div>

      <div class="card m-5">
        <div class="card-header">Featured</div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">
            With supporting text below as a natural lead-in to additional
            content.
          </p>
          <a href="#" class="btn btn-primary">
            Go somewhere
          </a>
        </div>
      </div>
    </div>
  );
}

export default App;

 

 

참고사이트 : ca02

ca02