[react]useEffectとuseRefの使用

データをロードした後、refを使用して参照中の値にアクセスして値を変更しようとしたとき、オブジェクトがnullでアクセスできないというエラーが発生しました.
isLoadedがtrueの場合、domオブジェクトをロードする必要があります.

 useEffect(() => {
    setIsLoaded(true);
    inputsRef.current[0].current.value = problem.title;
  }, []);

プロセスに従ってコードを記述する場合に発生します.
setisLoadedを実行すると、domオブジェクトがすぐにマウントされるわけではありません.
これにより、マウントされていない場合、refを使用してオブジェクトにアクセスしようとすると必ずエラーが発生します.
refではなくstateを使用してinput値にアクセスすると、
上のコードを使っても大丈夫だと思います.
stateは常に最初から存在するので、いつアクセスしても問題ありません.
私が宣言したrefは、isLoadedステータスがfalseかtrueかによって異なりますので、それにアクセスするには、現在DOMにインストールされているオブジェクトにアクセスしていることを確認する必要があります.
この問題を解決するために、以下のコードを修正しました.

  useEffect(() => {
    if (isLoaded) { // DOM이 로드된 상태이면
      console.log(inputsRef.current[0]);
      inputsRef.current[0].current.value = problem.title;
    }
    else setIsLoaded(true); 
  }, [isLoaded]);

本来はuserEffect関数の2番目のパラメータに空の配列を渡し、マウント後に使用します.
isLoadedの変更と入力データの変更はそれぞれ1回、同期しなければならないため(実行順序を守らなければならない)、依存値はisLoadedに設定します.
これにより、構成部品が最初にインストールされると、isLoadedはtrueになり、アップロードが完了したDOMオブジェクトがアップロードされます.その後useEffectを再実行するとisLoaded状態になるため、refを使用してinputに正常にアクセスできます.
話題を解決するのではなく、ref用のものをstateに変えたいと思っていましたが、ほほほ
refを用いることも完全に解決できる問題であることがわかる.