初めに
今回はReactでsupabase上のデータを引用する際に、意図せず画面が真っ白になってしまいました...
その原因と解決方法を自分なりに結論づけることができたので報告します！
問題のコード
const [todos, setTodos] = useState<any>([]);
解決した際のコード
const [todos, setTodos] = useState([]);
anyとは？
今回はsupabaseを初めて利用したため、参考としていた動画のコードをそのまま記述していました。
そのため<any>もそのまま記述していたのですが、これはTypescriptでしか使用できないそうです。
<any>についてchatGPTに聞いてみました。
useState<any>()は、ReactのuseStateフックを使う際にTypeScriptのジェネリクス構文を使用している例です。ここでの<any>は、このステートがどのような型の値も保持できることを示しています。TypeScriptのany型は、あらゆる型の値を許容する特別な型であり、型チェックを事実上無効にします。
useState<any>()とすることで、そのステートにどのような型の値もセットできるようになります。これは柔軟性が高い反面、型安全性が低下するため、必要な場合にのみany型を使用し、可能な限り具体的な型を指定するように心がけると良いでしょう。
つまりTypescriptでしか使えないことに加えて、安全性も下がってしまうため、赤る限り使わない方が良さそうです！
終わりに
初めてsupabaseデータを引用してみましたが、早速沼にハマってしまいました...
まだまだこれからも沼にハマると思うので、chatGPTや先輩に頼るなどして乗り越えていきます！！