useMemo 와 useCallback

리액트는 상태나 props가 변경될떄마다 모든 컴포넌트를 재랜더링 합니다

만약 app.js라는 컴포넌트에서 상태를 변경한다고 하면 app.js와 상태가 연결되어있는 하위 컴포넌트들까지 재랜더링이 되면서

성능저하를 일으킵니다 작은단위의 프로젝트면 괜찮지만 큰 규모의 컴포넌트단위 프로젝트 같은 경우에는 큰 리소스를 차지할뿐만 아니라 불필요한 성능저하를 일으킬수 있습니다 그래서 나온것이 useMemo입니다.

useMemo는 props가 실제로 변경되었을때,

새로운 값이 들어올때만 컴포넌트 함수를 재 실행하고 새값이 없다면 재랜더링을 하지 않습니다.

하지만 useMemo도 부족한 점이 있습니다 함수 컴포넌트 안에 함수를 생성해서 props 객체로 넘겨주면 

useMemo는 이를 인식하지 못합니다. 그 이유는 객체는 참조값을 따르고 있고 useMemo가 내부적으로 실행하는 등호를 통한 비교는 

원시값에 대하여 통용되지 못하기 떄문입니다, 따라서 이때 사용하는것이 useCallback입니다 

함수를 useCallback으로 감싸게 되면 이 함수에 대한 재랜더링을 막아줍니다.