[react]カスタマーホーム+ユーザーOutsideClickの使用

🤔 Custom Hook?

Custom Hookはuseで始まるJavaScript関数です.
Custom Hookを使用すると、これまで素子内部で全体として使用されてきた状態とEffectとを以下のように分離できます.
独自のHookを作成するだけで、構成部品ロジックを関数として抽出して再使用できるという利点があります.
今回の2回目のプロジェクトではcustom hook(!)を使用しました(学んだことはすぐに使いましょう)

解決すべき問題

にはカテゴリ、クラス進行方式、エリア、スケジュール(titleと呼ばれる)があり、リストをチェックボックス形式で含むFilterDOMもあります.
(FilterDOM=titleとcontents)

titleをクリックすると、そのリストが表示されなければなりません.FilterDOMの外部部分をクリックすると、リストが消えなければなりません.

custom hookによるトラブルシューティング

👉 この問題を解決する方法は,外部クリックを検出するUseOutsideClickを利用することである.グーグルが検索しました.
参考資料:https://chakra-ui.com/docs/styled-system/utility-hooks/use-outside-click
https://developer.mozilla.org/ko/docs/Web/API/Node/contains

  useOutsideClick(filterDom, () => setIsContentsShowed(false));


 <FilterList ref={filterDom}>
 // 코드생략
 </FilterList>


const useOutsideClick = (ref, handler) => {
  useEffect(() => {
    const listener = event => {
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      handler(event);
    };

    document.addEventListener('mousedown', listener);
    return () => {
      document.removeEventListener('mousedown', listener);
    };
  }, [ref, handler]);
};

setisContentsShowは、contents(チェックボックスリスト)を表示するかどうかを決定するステータス関数です.
USOutSideClick hookを使用して、FilterDomの外部ポイントをクリックしたときに検出し、isContentShowの値をfalseの論理に設定します.(2番目のパラメータにクリック発生時の動作を書きます.)
hookを使用することで、他の人はこのhookの名前を見ることができ、それがどんな論理なのかを大まかに推測することができます.(より読みやすい!)
また、カスタムホームを作成して使用すると、コンポーネントの論理を分離して、必要に応じて容易に再使用できます(!)

🍯 の最後の部分

重複するロジックは必ずコンポーネント化またはカスタムフックを作成します-!
繰り返さないように-!