개발/React2 👋국비 후기 모음👋 (이력도 확인 가능!) Memoization (React.memo, useCallback, useMemo) 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. - 출처 위키피디아 React에서는 메모이제이션을 세 가지 방식으로 할 수 있다. React.memo() - HOC useCallback() - Hook useMemo() - Hook React.memo React.memo는 HOC다. 동일한 props로 동일한 렌더링을 한다면, React.memo를 사용하여 성능 향상을 누릴 수 있다. memo를 사용하면 React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. App.js import Memo from './component.. 2022. 9. 28. 고차 컴포넌트 (HOC)란? Hook 예제 HOC를 공부하려다 보니 옛날 예제(클래스형 컴포넌트)들로 나와있다. 요즘엔 거의 다 Hook(함수형 컴포넌트)으로 코딩을 하기에 예제 이해하는데에 약간의 어려움이 있었다. 그래서 Hook으로 정리해보려고 한다. HOC란? 공식문서 - HOC(Higher-Order Components) 한 줄로 표현하자면 이렇다. 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수.(재사용성) 공식문서를 완벽히 이해하면 좋겠지만 클래스형 컴포넌트로 짜여 있어 한번에 와닿기가 힘들었다. 한 번 이해하고 나면 아주 쉬운 개념이라고 할 수 있다. 공식 문서의 예제와는 조금 다르게 더 쉬운 예제로 설명하고자 한다. 주의! 아래의 설명들은 무지막지하게 초간단 설명이므로 자세한 건 공식문서를 참고 App.js impor.. 2022. 9. 19. 이전 1 다음
