React - useMemo, useCallback을 배우기 전에 알아야 하는 것

1. 함수형 컴포넌트는 그냥 함수입니다. 함수형 컴포넌트는 단지 jsx를 반환하는 함수입니다.

2. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출해서 사용하는 것을 말합니다.
   함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수)도 매번 다시 선언되어 사용됩니다.

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

useMemo

메모이제이션(memoizaition)

• 컴퓨터 프로그램이 같은 계산을 반복할 때, 이전 계산값을 메모리에 저장하여 반복수행 제거, 실행속도를 빠르게 하는 기술

메모리제이션된 값을 반환한다라는 문장이 핵심이다. 다음과 같은 상황이 있다고 가정해보자. 하위 컴포넌트는 상위 컴포넌트로부터 a와 b라는 두 개의 props를 전달 받는다. 하위 컴포넌트에서는 a와 b를 전달 받으면 서로 다른 함수로 각각의 값을 가공(또한 계산)한 새로운 값을 보여주는 역할을 한다. 하위 컴포넌트는 props로 넘겨받는 인자가 하나라도 변경될 때마다 렌더링되는데, props.a만 변경되었을 때 이전과 같은 props.b도 다시 함수를 호출해서 재계산해야 할까? 그냥 이전에 계산된 값을 쓰면 되는거 같은데??