■ 現象(問題)

介護士カードにホバーすると、

1人にホバーしているのに全員の詳細が表示される状態になっていた。

ホバー状態をtrue/falseのみで管理していたため、

全カードが同じ状態を参照し、区別ができていなかった。

image.png

개호사를 호버하면 모든 개호사의 구체적 정보가뜸.png

useState で hoverId を導入し、カードごとに状態を判別できるように変更

image.png

image.png

■ 感想

今回の実装で感じたのは、 変数を一つ作っただけじゃ終わらないってこと。

その変数がどう動いて、どこに影響を与えるのかをちゃんと考えないと、 思わぬところでバグになったり、全部に適用されちゃったりする。

最初はただの true/false で管理してたけど、 それだと全部のカードが一緒に反応しちゃって、 「誰に対して表示するか」をちゃんと考えて作り直した。

これからは「とりあえず動けばOK」じゃなくて、 どういう流れで値が変わって、何が起きるのかを もっと具体的にイメージしてから書いていこうと思った。