UseEffect vs UseMemo/UseCallback

우선 각각의 개념과 특징을 먼저 알아보자,

UseEffect	UseMemo, UseCallback
원하는 시기에 실행을 위해 사용	성능 최적화를 위해 사용

Tie Design 프로젝트 UseMemo 사용 예시
components/community/editor.jsx

useMemo(() => {
    initialOnChange((initialItem) => ({
      ...initialItem,
      color: color.hex,
    }));
  }, [initialOnChange, color]);

Design.jsx 파일로 부터 받은 initialItem 인자를 받고, color 인자가 ColorPicker를 통해바뀔경우 intialItem의 값을 변경해준다.

현재 나의 코드에서는 useMemo를 UseEffect로 변경하여도 실행에 문제는 없었다....(이유는 잘 모르겠어요...)

그러면 위의 사용 방식은 적합할까?🤔

우선, 앞서 말한 사용 방식 차이에 따라 사용하여야 한다.
나의 코드를 보면 특정 값을 반환하려는 것이 아니고 initialOnChange를 실행하기 위해 작성한 것으로 코드에서는 UseEffect가 적절한 사용 방법이다.

UseMemo는 값을 반환하고 UseCallback은 함수를 반환한다. 나의 코드는 UseMemo가 반환하는 값이 없이 사용한 것이다.

언제 UseMemo와 UseCallback을 사용해야 할까?🤔

UseMemo는 무조건 사용한다고 성능에 도움이 되는 것은 아니기 때문에 잘 판다하고 사용하여야 한다.

두번 째, 다른 하나의 예시로 타입에 따라 사용할 경우도 있다.

Tip! 객체 타입과 원시 타입의 차이

const locationOne = "Korea"
const locationTwo = "Korea"

locationOne === locationTwo
>true
같은 주소값에 할당

const locationOne = {
	country:"Korea"
}
const locationTwo = {
	country:"Korea"
}

locationOne === locationTwo
>false
다른 주소 값에 할당

따라서 UseEffect의 의존 배열의 값이 랜더링 될 경우 원시타입의 값은 같은 값으로 평가하기 때문에 값이 바뀌지 않는 것으로 평가하지만 객체 타입의 값은 다른 값으로 평가하기 때문에 함수가 실행되지 않는다. 이를 해결하기 위해 참조하는 값을 UseMemory에 보관하여 UseEffect가 실행되지 않는 현상을 해결할 수 있다.

비슷한 맥락에서 함수를 반환하는 useCallback의 경우 function 또한 다른 주소 값에 할당 되기 때문에 function을 useEffect가 function을 의존할 경우 실행되지 않는 현상을 해결 할 수 있다.

+)위의 예시는 하나의 예시로 UseMemory와 UseCallback은 memoziation 기법으로 저장 시켜 이전에 계산한 값을 캐싱해두어 메무리에서 꺼내 사용하는 개념을 먼저 생각해야한다.