useMemo

사용 상황

React는 특성상 컴포넌트 혹은 데이터의 변화가 발생하면 컴포넌트가 다시 그려지는 re-render이 발생.
예를 들어 데이터를 업데이트하는 함수가 컴포넌트 내부에 있다고 하자 (Timer 같은?)
해당 타이머는 시간이 지날수록 상태 값, 데이터 값이 바뀐 것으로 인식을 한다.
이 변경된 데이터 값으로 인해 해당 컴포넌트는 다시 화면에 그려지는 과정을 거친다.
1 render per second이 발생하며 실질적인 변화 값(시간 제외)이 없어도 계속해서 리소스 낭비가 발생하게 된다.

나 같은 경우, 데이터를 호출받은 이후, 사용자 액션에 따라 가져온 데이터를 출력하는 컴포넌트가 있었다.
하지만 해당 컴포넌트 또한 데이터를 재호출하며 불필요한 낭비가 발생하고 있었다.
이 이슈를 해결하기 위해 hook을 사용하는 것을 권장하는데, 그 중 하나가 useMemo였다.

useMemo 정의

memo, 말대로 memoization이라 불리는 해당 hook은 데이터를 기억하기 위한 용도로 사용된다.
따라서 호출받은 데이터를 다시 호출하거나 변동하는 값 없이 그대로 사용하기 위해 사용되는 형식의 함수다.
React는 이런 부분에서 독특한 형태를 가진다 생각한다 고려해야할 lifecycle이 엄청난 느낌이랄까...

문제 해결

const allData = useMemo(() => {
  const result = [];
  for (let counter = 2; counter < selectedNum; counter ++) {
    result.push(counter);
  }
  return result
}, [selectedNum]);

사용법은 데이터의 상태를 지속적으로 업데이트하는 함수를 useMemo 안에 감싸는 형태로 이해하면 된다. useMemo가 받아들이는 인자값은 2가지를 가진다.
1. 동작할 함수
2. useMemo가 의존하는 데이터 값...
정도로 이해하면 되겠다.

최초 마운트되는 시점에 컴포넌트가 실행이 되고 해당 함수가 실행되며 모든 값은 selectedNum 안에 담기게 된다. 화면이 재구성(re-render)되는 시점에 변경된 상태 값 혹은 데이터가 없을 경우, 기존 담아둔 데이터를 출력하고 있을 뿐, 실질적인 호출이 발생하지 않는다는 점. 따라서 기억하는 데이터를 활용해서(memo) 화면을 구성한다는 점