React memo (2) 썸네일형 리스트형 React.memo React.memo 란 - 리액트에서 제공하는 고차 컴포넌트 (HOC) - Memoization 기법으로 동작한다. - 컴포넌트가 props 로 동일한 결과를 렌더링하면, React.memo 를 호출하고 결과를 메모이징 하도록 래핑하여 경우에 따라 성능을 향상시킬 수 있다. - React.memo 는 props 의 변화에만 영향을 준다. ( 함수 컴포넌트 안에서 구현한 state 나 context 의 변화에는 재렌더링 ) 고차 컴포넌트? HOC ? 어떤 컴포넌트를 인자로 받아서 최적화된 새로운 컴포넌트를 반환해주는 함수 - 최적화된 새로운 컴포넌트는 렌더링이 될 때마다 prop check 라는 과정을 거쳐서 자신의 props 의 변화를 파악한다. ( props 가 변화가 있다고 인지하면 렌더링을 하고, .. [React Hooks] useMemo useMemo 란 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나 useMemo 의 Memo 는 Memoization 을 뜻함 memoization이란 - 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 - 자주 사용되는 값을 캐싱해두어서, 필요할 때마다 다시 계산하는게 아니라, 재사용하는 것 함수형 컴포넌트에 대해 - 함수형 컴포넌트는 렌더링 -> component 함수 호출 -> 모든 내부 변수 초기화 과정을 거친다. UseMemo 를 사용했을 때 함수형 컴포넌트 모습 const calculate = () => { return 10 } function App() { const value = useMemo(() => { .. 이전 1 다음
