728x90 hooks2 [React] Hooks : optimizing 성능 최적화(2) - useMemo useMemo란? useMemo는 컴포넌트의 성능을 처적화시킬 수 있는 대표적인 react hooks 중 하나입니다. useMemo에서 Memo는 Memoizaion을 뜻합니다. Memoization이란 기존에 수향하 연산의 결과값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 🔥기억하기!! 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여 실행되는 것을 뜻합니다. 심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게 받은 props가 변경되지 않았더라도 리렌더링 됩니다. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받은 props가 변경될 때마다 리렌더링 됩니다. 심지어 하위 컴포넌트에 최적화 설정을 하지 않으면 부모에게 받는 pro.. 2022. 12. 22. [React] React Hooks 공부하기! Hook이란? Hook은 React 버전 16.8부터 React요소로 새로 추가되었다. Hook을 이용하여 기존 Class바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있도록 만든 라이브러리이다. Function 컴포넌트를 Class 컴포넌트처럼 사용할 수 있다. Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다. Hook의 규칙 1. 최상위에서만 Hook 호출 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. early return이 실행되기 전에 항상 React 함수의 최상위에서 Hook을 호출해야 한다. 잘못된 Hook 사용방법 export defaul.. 2022. 8. 13. 이전 1 다음 728x90
