React 성능 최적화
•
useCallback (fn,[deps])
◦
useCallBack의 두번째 인자인 deps의 변화가 발생한게 아니라면, 굳이 함수를 다시 생성할 필요가 없는 함수의 경우에는 useCallBack으로 최적화를 진행했습니다. 중요한 포인트는 fn 함수에 의존하는 자식 컴포넌트의 불필요한 리렌더링을 방지 할 수 있는 것입니다 !
•
React.memo
◦
React.memo는 메모이제이션 기법으로 동작하는 고차 컴포넌트입니다. 컴포넌트의 props에 변경이 없으면, React.memo를 호출하도록 하고 결과를 메모이징 하도록 래핑하여 성능을 향상 시킬 수 있습니다. 부모 컴포넌트의 리렌더링 같이 의도치 않은 리렌더링이 발생했을 때, props의 변화가 없으면 이미 메모리에 저장된 데이터를 가져오기 때문에 최적화가 가능합니다 ! → 이번 프로젝트에서 props가 없는 컴포넌트 처럼 React.memo가 효율적으로 동작할 수 있는 곳에서 사용해보았습니다.