React 초보가 꼭 알아야 할 성능 최적화 훅 두 가지 (useMemo / useCallback)
·
FrontEnd/React
리액트 컴포넌트는 왜 리렌더링될까?React 함수 컴포넌트는 사실 "그냥 함수"입니다.마운트가 되면 모든 함수는 리렌더링이 일어나는데요, 리렌더링이 일어나면, 그 함수가 처음부터 다시 실행됩니다.컴포넌트 안에 있는 변수 선언, 함수 선언, 연산 → 전부 다시 실행됩니다.리렌더링(함수 컴포넌트가 다시 실행 됨) 할 때 마다 모든 계산이 새로 실행되면, 메모리 과부하. 성능 낭비가 올 수 있겠죠성능 낭비를 막을 수 있는 훅 중 가장 유명한 훅 두개를 파해쳐 볼게요useMemo : 연산 결과를 캐싱해서 필요할 때만 다시 계산, 자식 렌더 차단useCallback : 함수 인스턴스를 캐싱해서 필요할 때만 새로 만듦 UseMemo 부터 어떻게 생겼는지, 어떤 쓰임새로 쓰는지 알아봅시다 useMemo란 무엇인..