7. useCallback 을 이용한 fetch ( 비동기함수 ) 사용하기, useEffect 초기 렌더시 내부함수 사용 금지하기

useCallback 은  memoization 을 통해, 의존성 배열이 바뀌지 않는다면, 새 함수를 생성하지 않고,

기존 함수를 다시쓰는 최적화 기능을 제공한다.

 

물론, memoization 에도 비용이 발생하기 때문에, 복잡하지 않은 함수의 경우 썩 큰 효과를 누리지는 못한다.(고한다.)

 

일단 연습겸, fetch 를 하는 함수에 사용해보았다.

 

1. useCallback Hook을 통한, 비동기함수의 생성

const getDogsDataHanlder = useCallback(async () => {
    const fitDogs = await fetch("/api/dogs", {
      method: "POST",
      body: JSON.stringify({ personality: fitArray, size: size }),
      headers: {
        "Content-Type": "application/json",
      },
    });
    const fitdogsData = await fitDogs.json();

    setFitMatchDogsDatas(fitdogsData.data);
  }, [size]);

버튼을 누르면, size 가 변화된다.

만약 size 의 변화가 없다면,  컴포넌트가 리렌더링 되더라도 새로운 함수가 아닌 해당 함수를 다시 사용할 것이다.

그럴 수 있기 때문에 useCallback 을 사용해보았다.

 

2. useEffect 의 초기렌더시 내부함수 사용 금지하기

 

useCallback 으로 만든 해당 함수는, useEffect 를 통해 특정 상황에 자동으로 실행될것이다.

문제는 특정상황이 아니라, 초기렌더시에도 강제로 실행된다는 것이다.

그러므로, 초기렌더시에 사용되는 것을 막아보자.

 

let initial = true;

const DogsMatch = () => {
	...

    useEffect(() => {	
        if (initial) {	 	// 초기 렌더에 실행되는 것 막기
            initial = false;
            return;
        }
        getDogsDataHanlder();
        
    }, [size]); 		// 의존성배열

 

initial, 로 초기 렌더시 useEffect 의 사용을 막을 수 있다.

초기 렌더시 inital 이 false 로 변경되고, return 에 의해, useEffect의 함수의 실행이 막히게된다.

이후 의존성배열인 size 가 변경될 때에만, 해당 함수가 실행될것이다.