「useClickAway」カスタムフックを使用してclickawayロジックを再使用-プロジェクト再パッケージプロセス

チームプロジェクトの過程で共同で使用する論理を分離し再利用する重要性について、私は多くのことを感じました.
この過程では,プロジェクトを行うたびに重複する機能が見られ,共通論理の必要性を改めて感じ,自分が作成したコードを振り返り改善する過程で特にこの点に重点を置く.

一般util関数ではなくcustom hookを使用するのはなぜですか?

Custom Hookは注目点を分離するモードで、簡単に言えば内部でもReaction Hookを使うことができます.
この間、custom hookに慣れていないだけでなく、utils関数を通常の関数として使うよりも便利な場合もあり、click away機能はこのような場合だと思います.
したがって,汎用論理をCustom Hookに再構築するプロセスである.

0.要求制御ボード

[第2週入門レベルの課題]-再構築を要求する(ドロップダウン・バー、サイドバーClickAway util関数の作成)
プロジェクトの進行中、サイドバーとドロップダウンウィンドウにはclickaway機能が必要になるため、チームメンバーとともに汎用ロジックに分離して再使用できるかどうかを考慮します.
サイドバードロップダウン
位置決めで書いたように、サイドバーは後ろの背景をクリックするとウィンドウが閉じますが、ドロップダウンウィンドウは他の要素をクリックしたときに消えなければならないため、これらの条件を共同で適用するのは難しい原理です.
当時はプロジェクトの核心部分ではなかったので優先していませんでしたが、共通の論理を分離して、きちんと再利用することが、簡潔でメンテナンスしやすいコードを書く方法の一つなので、よく考えてみたいと思います.もちろん、共通の論理でなくても、書かれたコード自体の質が悪いと思うので、もっと良い方法を探したいです.
他のチームメンバーと協力して、それぞれが担当する機能を実現していますが、共通の関数を再利用することが重要なことよりも、自分では馴染みがないと思いますし、clickaway機能も一般的に使われている機能なので、完成後のプロジェクトの後にもう一度行うことにしました.
👉 使用     パブリックロジックに適用されるプロセスを表示します

1.宿泊証開放プラットフォーム

USICK Away Custom Hookを使用して、ウィンドウの外部領域をクリックしてウィンドウを閉じる機能を実現

このプロジェクトの核心は,複数の検索項目に基づいてフィルタを適用し,条件に合った宿泊場所を探すことである.
検索ページには複数のドロップダウンウィンドウが使用されており、「閉じる」ボタンと「ウィンドウの外部領域をクリックしてウィンドウを閉じる」を実現する必要があります.

- 드롭다운 창 내부 영역을 누르면 창이 닫기지 않아야 한다.
- 창 내부 영역에 포함된 닫기버튼을 누르면 창이 닫겨야 한다.
* 창 외부 영역을 누르면 창이 닫겨야 한다.

そこでUSECLICKAwayCustomHookを作成して再利用し、その過程で再考の過程を経た.
InnerHTMLメソッドを使用して文字列に変換し、ドロップダウンウィンドウの内部要素の有無を判断する論理を使用して、より可読性と正確性のあるコードを記述するために、追加の再構築を行い、より改善しました.
最初のダッシュボードプロジェクトでは、異なる条件に適した「クリックアウト」機能を実装しました.これにより、この機能を再構築にさらに適用できます.
👉 Custom Hookの使用     ドロップダウンウィンドウclickAway機能再構築プロセスへのアクセス