useMemo 개념정리

해당영상을 보고 정리한 글입니다. 

https://www.youtube.com/watch?v=e-CnI8Q5RY4&t=451s 

 

Component성능 최적화 를 위해 사용된다. 

자주사용하는 값을 처음 계산을 했을때 저장을 해두고 다음 사용해야할때 꺼내서 쓸수 있게  하는 것.

함수를 렌더링 할때 함수안에 모든 값들은 재 렌더링 된다. 

함수 안에 함수가 복잡한일을 하는 함수라면 usememo를 통해 이값을 저장하고 재 렌더링을 막는다. 

 

구조

const value = useMemo(() =>{
  retrun calculate();
}, [item])

useMemo(콜백함수 , 배열)

배열 이 업데이트 되어질 때만 콜백함수를 호출해서 변경한다. 

 

- 꼭 필요할 때만 사용해야 한다. 성능이 악화될수 있다. 

 

Example 1 

const hard = (number) => {
  console.log("hard");
  for (let i = 0; i < 99999999; i++) {}
  return number + 10000;
};

const easyCal = (number) => {
  console.log("easy");
  return number + 1;
};

function App() {
  const [hardNum, setHardNum] = useState(1);
  const [easyNum, setEasyNum] = useState(1);
  const hardSum = hard(hardNum);
  const easySum = easyCal(easyNum);
...
}

easycal 은 간단한 함수 임에 불구하고 hardcal과 같은 시간이 걸린다. 

그이유는 easynum이 변할때 모든 app함수 안에 값이 재 렌더링 되기 때문이다. 

 

useMemo는 어떠한 조건이 만족되었을 경우에만 값을 초기화 한다.

만약 easynum의 값이 변화하더라도 hardnum의 값은 초기화하지 않고 이전에 값을 할당시키는 역할만 함으로 렌더링을 줄인다. 

 

useMemo는 두개의 인자를 갖는다. 1. callback func 2. 의존성 배열 - 배열안의 값이 바뀔때만 callback안 함수를 다시호출해서 hardSum에 할당

  const hardSum = useMemo(() => {
    return hard(hardNum);
  }, [hardNum]); //useMemo는 두개의 인자를 갖는다. 1. callback func 2. 의존성 배열 - 배열안의 값이 바뀔때만 callback안 함수를 다시호출해서 hardSum에 할당
  //hardNum가 변경이 되야지만 콜백함수 안에 함수가 작동을한다.
  //hardNum가 변경이 되지 않았다면 그전에 hardSum에 할당된 값을 불러옴

 

Example 2

객체타입은 값을 저장할때 메모리 장소를 할당한 후에 그안에 값을 저장한다. 

때문에 객체의 값이 같아도 메모리 저장소 가 다르기 때문에 값은 다르다고 표시된다. 

  const location = {
    country: isKorea ? "korea" : "abroad",
  }
  
  useEffect(() => {
    console.log("useEffect call");
  }, [location]);
  // number 의 값이 변하면 app함수 전체가 reder된다.
  // 그 과정에서 location은 객체이므로 메모리 저장소를 새로 할당받아 값을 저장한다.
  // 때문에 할당 과정에서 useEffect가 location이 변한것으로 감지하고 useEffect를 호출한다.
  //

SOLUTION

  const [isKorea, setIsKorea] = useState(true);
  const location = useMemo(() => {
    return {
      country: isKorea ? "korea" : "abroad",
    };
  }, [isKorea]);