コンポーネントの再使用

Instagramクローン符号化の過程で,1つのシードコンポーネントを作成し,mapを用いて複数のシードをデータで撮影することでreactの利点を再認識した.今日はMonsterという課題を行い,コンポーネント再利用やPropsの使用などを再学習した.

データ・フロー

Monsters.js > CardList.js > Card.js

1. Monsters.jsでは、まずfetch関数でデータを受信し、jsonフォーマットに変換してStateに保存します。

これにより、これらの形式のデータをステータスに表示し、これらのデータを使用してコンポーネントUIを画面に表示してPropsに渡すことができます.

2. CardList.データ状態をjsに渡し、マッピングを使用します。

CardListでは、受信したデータ数に応じて、上の写真で合計10個のデータが受信されるので、mapを10回迂回して、合計10個のUIを撮影することができます.

3. Card.Propsを介してjsにデータのid,name,emailを送信する.

function Card(props) {
  return (
    <div className="card-container">
      <img
        src={`https://robohash.org/${props.id}?set=set2&size=180x180`}
        alt="monster"
      />
      <h2>{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
}

したがって、このコンポーネントを作成することで、ユーザインタフェースは、写真、名前、電子メール情報を含むユーザインタフェースをデータの個数で印刷することができる.

フィルタを使用した検索

では、このように印刷されたUIを検索したい場合は、どうすればいいのでしょうか.最初は、onChangeを使用してe.targetを入力します.valueでstateを表し、それを利用してfilterを使えばいいと思いますが、考えてみれば検索ウィンドウでは入力値にUIをリアルタイムで描くのではなく、検索ボタンをクリックしたときに実行するので、onClickイベントやstateを適切に利用すべきだと思います.

1.2つのステータスを使用して、Propsに渡す入力値を処理

function Monsters() {

  const [monsters, setMonsters] = useState([]);

  const [search, setSearch] = useState("");
  const [callbackSearch, setcallbackSearch] = useState("");
  
  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users`)
      .then((response) => response.json())
      .then((json) => setMonsters(json));
  }, []);


  return (
    <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
    
      <input
        value={search}
        placeholder="몬스터찾기"
        type="text"
        onChange={(e) => {
          setSearch(e.target.value);
        }}
      />

      <button
        onClick={() => {
          setcallbackSearch(search);
        }}
      > 검색
      </button>

      <CardList monsters={monsters} search={callbackSearch} />
    </div>
  );
}

まずfilterを使用するには、inputウィンドウで発生した値、すなわちsearchという名前の状態でリアルタイムで入力したe.targetを知る必要があります.価値が含まれています.
当初,CardListはリアルタイム入力値を含む探索状態であった.jsに転送してみましたが、UIのリアルタイム変更を見ました.
ボタンでonClickイベントが発生したときに、callback Searchの状態値にsearchを含めてPropsに渡すcallback Searchという状態を作成します.

filterとincludeを使用して特定の値マッピングのみを使用

function CardList(props) {
  return (
    <div className="cardList">
    
      {props.monsters
        .filter((monster) => monster.name.includes(props.search))
        .map((monster) => (
          <Card id={monster.id} name={monster.name} email={monster.email} />
        ))}

    </div>
  );
}

まず、onClickイベントが発生した場合、入力値をProps,CardListに転送します.jsでは、上記のように「C」キーワードを検索すると、そのキーワードもデータとともに渡されます.これにより、まずフィルタを使用して検索状態値を含む新しい配列をデータから返し、id、name、emailをCardというコンポーネントに渡し、mapを返します.

追加

なぜinputでvalueをsearch stateと指定するのか

 <button onClick={() => {
          setSearch("");
        }}
      >
        검색창 초기화
      </button>

Inputウィンドウのvalueを自由にタッチできます.

足りないところ

フィルタを使うのは便利ですが、すべてのデータを再スキャンする必要があります(データが非常に多い場合は...)

inputウィンドウでは、イベントが発生するたびに再ロードされます.

低純価値、高純価値、マルチ購買などを実現する方法