ImportとExport

私がショッピングサイトのページを作成するとき、サーバーから商品名や価格などの情報を受け取るデータといえば、これらを一つ一つHTMLに入れるのは難しいです.この場合、他のファイルにデータを入れてインポートできます.

export default [
  {
    id: 0,
    title: "[1+1]오버핏 맨투맨 후드티 세트",
    price: "38,500원",
  },

  {
    id: 1,
    title: "크루넥 루즈핏 스웨터",
    price: "32,900원",
  },

  {
    id: 2,
    title: "MA-1 후드 항공 점퍼",
    price: "79,200원",
  },
];

たとえば、データです.jsという名前のファイルには、上記の情報(変数名、関数名、データ型など)が含まれています.jsでは、次のようにインポートできます.

import products from "./data.js";

その後、Stateにこれらのデータを含め、使用するためにHTMLにデータをバインドできます.このように、すべてのデータをStateに入れたり、HTMLを作成したり修正したりする(データ量が大きい場合)よりも、簡潔で使いやすいと思います.

function App() {
let [product, product변경] = useState(products);
return(
         <div className="row">
          <div className="col-md-4">
            <img src="~~"width="100%"/>
            <h4>{product[0].title}</h4>
            <p>{product[0].price}</p>
          </div>
     		 )}

商品リストを使用してアセンブリ化+Map

3つの商品しかない場合は、上記のように1つずつ順番を書いても良いのですが、もっと多ければカタログをComponent化してMapを使って繰り返すことができます.

function App() {
let [product, product변경] = useState(products);
return(
          <div className="row">
           {product.map((a, i) => {
            return <Card product={product[i]} key={i} />;
           })}
         </div>
     		 )}
             
function Card(props) {
  return (
    <div className="col-md-4">
      <img src={props.product.src} width="100%" />
      <h4>{props.product.title}</h4>
      <p>{props.product.price}</p>
    </div>
  );
}

これにより、iカードにはproduct[i]のデータが転送されるので、順序を書かなくても、データの数に応じて商品リストを表示することができ、コードが短くなり、修正が多くなる場合に便利です.

Route

以前は、複数のページを作成すると複数のHTMLファイルが生成されていましたが、各ページに異なるHTMLファイルを表示するのではなく、React-RouterでHTML内部の内容を別のページに置き換えることができました.使用方法:
1.react-router-domという正式なライブラリをインストールし、
2. index.jsに次のコードを入力します(HashRouterもあります).

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

App.Routeをjsにインポートし、ページ

import { Route } from 'react-router-dom';

function App(){
  return (
    <div>
      HTML 잔뜩있는 곳 
      <Route exact path="/"> 
        <div>메인페이지</div> (Component도 들어갈 수 있음.)
      </Route>
      <Route path="/detail">
        <div>상세페이지</div>
      </Route>
    </div>
  )
}

「戻る」ボタンの作成

ページングの他にも、リンクやHistory、Switchなどで様々なアクションを実現できます.では、ショッピングモールから詳細ページに移動し、後退ボタンを作成したい場合はどうすればいいのでしょうか.

import { Route, Link, Switch } from 'react-router-dom';
import { useHistory } from 'react-router-dom';

function App(){
let history = useHistory();
  return (
    <div>
      HTML 잔뜩있는 곳 
      <Route exact path="/"> 
        <div>메인페이지</div> (Component도 들어갈 수 있음.)
      </Route>
      <Route path="/detail">
        <div>상세페이지</div>
        <button className="btn" onClick={()=>{ history.goBack() }}>뒤로가기</button> 
      </Route>
    </div>
  )
}

以上のように、useHistory(usStateに似たHook).名前の関数をインポートし、historyという変数に格納して使用できます.これにより,このhistory変数にはページ移動履歴や有用な関数などが含まれる.有用な関数の1つはgoBack()という関数で、この関数を実行すると前のページに進むことができるそうです.前のページではなくカスタムページに移動したい場合は、push()という関数を使用して位置を指定できます.
このライブラリの使い方は、調べたり、読んだり、調べたりしなければ分からないそうなので、よく検索して勉強する習慣を身につけましょう.