[리액트] 데이터 바인딩 차이 ( 변수 / 컴포넌트 )

변수 데이터 바인딩

다른 js 파일에 있는 html 데이터 바인딩

다른 파일로 빼서 변수에 담은 후, export 

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;

다른 파일 생성 후, array 배열 데이터를 변수 data 에 저장

다른 파일로 보내려면 export 해주고

받을 파일(App.js)은 import 해줌.

import data from "./data.js";

데이터를 받았으면 데이터를 담을 수 있게 데이터 보관함 생성
- useState 사용.

  let [shoes] = useState(data);

shoes 는 변수니까

  <h4>{shoes[0].title}</h4>

중괄호를 사용해서 활용.

---

컴포넌트 데이터 바인딩

detail 접속시 보여주고 싶은 html 보여주기 

다른 파일로 빼서 컴포넌트 함수 생성
- return 문 필수 사용

function Detail() {
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">상품명</h4>
          <p>상품설명</p>
          <p>120000원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}

export default Detail;

다른 파일로 보내려고 export 해 줌

App.js에서 저 함수를 갖다 쓰기 = import 하기

import Detail from "./Detail";

컴포넌트를 받았으면 활용

   <Route path="/detail" element={<div>상세페이지임</div>} />

원래 이거에서

<Route path="/detail" element={<Detail />} />

element 속성에 넣어서

컴포넌트 안의 html 생성해주기.