React useMemo

참고 강의

1) Memo란?

Memoization을 뜻한다. 동일한 함수를 리턴하는 함수를 반복적으로 호출해야 한다면 맨 처음에 호출된 함수를 메모리에 저장해놓고 필요할 때마다 메모리에서 꺼내서 재사용한다. (맨처음 값을 캐쉬에 저장해서 꺼내쓴다.)

2) 함수형

함수형은 실행될 때마다 모든 변수가 초기화된다. 만약 해당 함수가 복잡한 기능을 처리하는 함수라면 서비스 성능이 느려지게 된다.

3) useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

인자를 2개 받는데

첫번 째는 callback 함수이다. 우리가 memoization해줄 값을 계산해서 리턴해주는 함수이다.

두번 째는 의존성 배열이라고 부른다. 배열안에 해당 값이 변경 될 때만 함수를 실행시켜준다. 만약 빈 배열일 경우 처음에만 실행시켜준다.

4) 무의미한 사용은 금지

어찌되었든 필요 값을 메모리에 저장해 놓는 것이므로 모든 것을 다 useMemo를 사용하면 성능에 문제가 생긴다.

5) 자바스크립트 타입

원시(Primitive) 타입: String, Number, Boolean, Null, Undefined, BigInt, Symbol

객체(Object) 타입: Object, Array ... [원시 타입을 제외한 모든 것]
어떤 변수에 객체 값을 할당할 경우 바로 변수에 담기는 것이 아니라 메모리에 담기고 변수에는 그 메모리 주소가 할당이 된다.

따라서, useEffect를 사용할 때, 객체 타입은 다른 값으로 인식이 되어서 렌더링 과정에서 호출 된다.

example)

const [isKorea, setIsKorea] = useState(true)

const location = {country: isKorea ? '한국' : '외국'}

useEffect(() => {
  console.log('호출')
}, [location])

위와 같은 경우는 컴포넌트가 렌더링 될 때마다 계속 useEffect가 실행되어 호출이 출력이 된다.(location이 객체이므로) 이를 useMemo를 사용해서 바꿔준다면

const [isKorea, setIsKorea] = useState(true)

const location = useMemo(() => {
	return {country: isKorea? '한국' : '외국'}
}, [isKorea])

useEffect(() => {
  console.log('호출')
}, [location])