Project Fake Search 3-3検索機能と検索ページの実装(+プレビュー機能)

開始します。

今回はほぼ機能実装の最後の部分である検索機能と検索ページを実現した.プレビュー機能は、検索ページ設定において新しいウィンドウで検索ページを表示する機能であるため、検索ページを実現する際に、コンポーネントをコピーしてイベントを除去することで実現される.

検索機能の実装

検索機能は、検索ウィンドウに単語を入力し、EnterまたはSearchボタンを押して検索ページに入り、その単語のデータの一部を取得するため、クライアントがurlに単語を含むことを確認する必要があります.単語をstateまたはredoxに管理すると、ページのリフレッシュ時にデータが初期化されるため、他のポータルサイトと同様にurlに含まれる方法が使用されます.

function App() {
		...
  return (
    <div className='App'>
      <div className='App-content'>
        <Switch>
		...
          <Route path='/search/query=:word' component={Search} />
          <Route path='/search/query=' component={Search} />
		...
      </div>
    </div>
  );
}

export default function Search({ match }) {
  const { word } = match.params;
		...
  const getSearchData = useCallback(async () => {
    const res = await axios.get(
      `${process.env.REACT_APP_SERVER_API}/search/word`,
      {
        params: { word },
        withCredentials: true,
      }
    );
    if (res.data.id) {
      setSearchData([
        res.data.profile,
        res.data.news,
        res.data.image,
        res.data.music,
      ]);
    }
  }, [setSearchData, word]);
		...
  useEffect(() => {
    getSearchData();
  }, [getSearchData]);
		...
  return (
    <div className='search-container'>
		...
    <div/>
  );
}

以前Dadachi ProjectまたはShellWehealthに適用した方法に従ってpathに:を貼り付け、変数名を設定することで、このコンポーネントからmatch.paramsを得ることができますが、これとは異なり、検索語が空の文字列であれば設定も行います.当初はサーバへのリクエスト送信時に検索語がないためエラーが発生したと考えられていたため,match.params.wordがundefinedの場合をサーバに別々に送信した結果,最初にpathを'/search/query=:word'に設定したため,単語がない場合にはそのコンポーネントに接続できないことが問題であった.<Route path='/search/query=' component={Search} />は、単語がなくても検索コンポーネントに移動できるように、ルーティング設定を追加した.

検索ページの実装

検索ページは,サーバが対応するユーザが設定した検索語のデータを受信することによって表示され,複雑な論理はないので容易に実現できる.地図を各部分の構造帯に設定して、適切に使用して表示します.

export default function Image({ imageData }) {
  return (
    <div className='image-container'>
		...
        {imageData.img1 !== '' ? (
          <img
            src={imageData.img1}
            alt='images'
            className='images'
            onError={(e) => {
              e.target.onerror = null;
              e.target.src = '../../img/no-image-row.png';
            }}
          />
        ) : (
          <div className='images'>
            설정된 이미지가
            <br />
            존재하지 않습니다.
          </div>
        )}
		...
    </div>
  );
}

onErrorプロパティを使用して、ユーザーが画像を設定していない場合、srcが空の文字列の場合、表示されるボックスと、サーバの問題で画像をダウンロードしていない場合に表示される代替画像を設定します.

プレビュー機能

プレビュー機能は、検索ページが実現した後、そのコンポーネントをコピーすることでonClickなどのイベントを消去し、クリックしても動作しないようにします.

の最後の部分

今回の体験では,検索機能を実現するためには,データを導入し展示する部分が必要であり,ユーザが検索語を入力したり検索ページにアクセスしたりする過程で,開発者として考慮すべき部分が多い.実際のサービスを実現するためには,単純な機能実現だけでなく,実際のユーザの立場に立って考えることが重要である.