On.

useCallback

✔useCalbackの正しい使い方は、2つのコードを例に挙げてまとめます!

import axios from 'axios';
import {useState, useEffect} from 'react';
>
const Header: React.FC<Props> = ({user}) => {
  const [name, setName] = useState<string>("Jaewon Lee");
>
  const fetch= async (userData) => {
    const getName = await axios.get(`url/${userData.id}`);
    return getName.data;
  }
>
  useEffect( ()=> {
    const getUserName = async () => {
    setName(await fetch(user));
    }
>
    getUserName();
  }, [fetch])
>
  return (<>...</>)
}

✔¥上記の例では、なぜusCalBackを使うのかよく説明しています.
勘定科目の勘定科目1. Header 컴포넌트가 렌더링 된다. 2. useEffect 내부의 <getUserName> 이라는 비동기 함수를 실행시킨다. 3. <fetch> 함수로부터 리턴 받는다. 4. setName을 통해 리턴받은 데이터로 name이라는 state를 바꿔준다. 5. state 변경? 👉 컴포넌트 다시 렌더링 6. 5번을 기준으로 렌더링 이전의 <fetch>와 이후의 <fetch>는 다르다! (<fetch>가 저장되었던 메모리 주소값이 다르기 때문이야!) 7. <fetch>가 바꼈네? 👉 useEffect 다시 실행 8. Wow 무한루프 탄생!! ㅊㅋㅊㅋ前述のような場合の問題を、「関数の同等性」と呼びます.これを解決するには、useCallbackを使用します.
✔useCallbackの2番目のパラメータには、2479142を再レンダリングするために変更された値が必要ですが、以前の関数がuseCallbackの役割であることを覚えておいてください.
✔¥以下は上のコードで抽出部分のみ使用したuseCallback形式で書かれたコードです!

... 중략
>
  const fetch= useCallback(async (userData) => {
    const getName = await axios.get(`url/${userData.id}`);
    return getName.data;
  }, [user])
>
... 중략

Off.

フロントとバックグラウンドのリーダーになるまで。🔥🔥🔥