리엑트 입문 8 - useMemo()

useMemo 전에 알아야 할 것

1. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말합니다.

2. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용됩니다.

3. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경될 때마다 리렌더링 됩니다. (하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 됩니다. )

useMemo()란?

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

다음과 같이 사용하며, 메모리제이션된 값을 반환합니다

• 첫번째 인수에는 어떻게 연산할지 정의하는 함수, 두번째 인수에는 배열을 넣어 사용합니다.
  - 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하는 형태로 사용됩니다.