ch 04 리액트 훅

ch04 - 05 useMemo

useMemo

• 지정한 함수를 호출하여 반환받은 결과값을 내부에 저장(캐싱)하는 함수

API

const calculateValue = function(){ ... };
const cachedValue = useMemo(calculateValue, dependencies);

매개변수

• calculateValue: 캐싱할 값을 계산하여 반환하는 순수 함수
• dependencies: 의존 객체 배열
  • 계산 결과에 영향을 주는 calculateValue 함수의 인자값
  • 이 배열의 값이 하나라도 변경되면 calculateValue 함수를 다시 호출하고, 변경되지 않으면 캐시된 값을 반환
  • 빈 배열을 지정하면 의존성이 없으므로 매번 캐시된 값을 반환

리턴값

• calculateValue 함수를 호출한 결과값
• 다음 렌더링 중에는 dependencies가 변경되지 않으면 캐시된 결과를, 변경되었으면 calculateValue 함수를 다시 호출한 결과값

React.memo

• 컴포넌트를 memoize한 후 리렌더링 될 때 props가 변경되지 않으면 memoize된 컴포넌트를 반환
• 컴포넌트가 리렌더링될 때 props가 변경되지 않으면 최종적으로 브라우저 DOM에 쓰기 작업이 이루어지지 않지만, 가상 DOM 생성과 비교 작업에도 리소스가 사용되므로, memoize된 컴포넌트는 성능 향상에 도움을 줄 수 있음
• 리렌더링 될때 눈에띄게 지연이 발생하는 경우 사용

API

const MemoizedComponent = React.memo(SomeComponent, arePropsEqual?)

매개변수

• SomeComponent: memoize할 대상 컴포넌트
• arePropsEqual(선택): memoize된 컴포넌트를 반환할지, 컴포넌트를 다시 호출할지를 결정하는 함수
  • 컴포넌트의 이전 props 및 새로운 props를 인자로 받는 함수
  • true를 반환하면 memoize된 컴포넌트를 사용하고, false를 반환하면 컴포넌트를 다시 호출한 결과값을 사용
  • 생략 시 이전 props와 새로운 props를 얕게 비교하여 같으면 true, 다르면 false를 반환하는 기본 동작

리턴값

• memoize된 SomeComponent

React.memo 사용 시점

• 컴포넌트 호출 시 시간이 오래 걸리는 연산 작업이 있는 경우
  • memoize된 컴포넌트를 재사용하면 컴포넌트 호출 횟수를 줄일 수 있음
• 리렌더링될 때 props가 자주 변경되지 않는 컴포넌트
  • props가 자주 변경되는 컴포넌트에는 props를 비교하는 로직이 불필요하게 동작하므로, 오히려 성능에 좋지 않음

---

고차 함수 (Higher-Order Function)

정의

• 함수를 인자로 전달받거나 함수를 반환하는 함수.

예시

• Array.prototype.forEach, Array.prototype.map, Array.prototype.findIndex, Array.prototype.filter 등.
• 리액트에서의 활용
  • 컴포넌트(함수)를 인자로 받아 공통 로직을 추가한 새로운 컴포넌트를 반환.
  • 중복되는 로직을 고차 함수에 정의하여 컴포넌트별로 재사용 가능.
  • React.memo가 대표적인 고차 함수. 📜 05 useMemo - 함수의 반환값을 memoize
• 💻 App.tsx

ch04 - 06 useCallback

useCallback

• 컴포넌트 내부에서 정의한 함수를 캐시
• 컴포넌트가 다시 렌더링되더라도 함수가 다시 생성되지 않고 캐시된 함수를 사용
• 부모가 정의한 이벤트 리스너를 자식에게 props로 전달할 때, 부모가 리렌더링되는 경우 자식도 리렌더링되지만, 이때 props가 바뀌지 않으면 자식은 기존 DOM을 재사용하도록 메모이제이션할 수 있음
  • 이벤트 리스너를 컴포넌트 내부에서 정의하면 부모가 리렌더링될 때 리스너 함수도 새로 생성되므로 자식에 전달하는 props가 바뀌어 메모이제이션이 되지 않고 자식도 리렌더링이 발생
  • useCallback()을 사용하면 부모 컴포넌트가 재호출되어도 리스너가 수정되지 않고 유지되므로 자식도 기존 DOM을 재사용하여 성능이 향상됨

API

const cachedFn = useCallback(fn, dependencies);

매개변수

• fn: 캐싱할 함수
• dependencies: 의존 객체 배열
  • 캐싱된 함수에서 컴포넌트의 변수를 사용할 경우 함수 생성 당시의 값을 참조하고 있기 때문에 이 값이 바뀌면 함수도 다시 생성해야 함. 이 값을 의존성으로 지정하면 의존성이 바뀔 때마다 새로운 함수를 생성하여 반환
  • 빈 배열을 지정하면 의존성이 없으므로 매번 캐시된 함수를 반환

리턴값

• 최초에는 fn 함수를 반환하고, 다음 렌더링부터는 dependencies가 변하지 않았다면 이전에 반환한 캐시된 함수를, dependencies가 변했다면 새로 생성된 fn 함수를 반환

useMemo vs. React.memo vs. useCallback

• useMemo는 함수를 인자로 전달하고, 전달된 함수의 실행 결과(리턴값)를 memoize 함
• React.memo는 컴포넌트를 인자로 전달하고, 전달된 컴포넌트를 memoize 함
• useCallback은 함수를 인자로 전달하고, 전달된 함수를 memoize 함
• 차이점: 함수의 리턴 값 vs. 컴포넌트 vs. 함수 자체

📜 06 useCallback(함수 자체를 memoize), React.memo(컴포넌트를 memoize)

• 💻 App.tsx
• 💻 Price.tsx
• 💻 Product.tsx
• 💻 Shipping.tsx

ch04 - 07 customHook - useCounter 커스텀 훅

Custom Hook

• 개발자가 직접 작성하는 리액트 훅으로, 리액트의 내장 훅(useState, useEffect 등)을 이용해 특정 로직을 재사용 가능하게 만든 함수
• 여러 컴포넌트에서 공통으로 사용할 수 있는 상태 관리나 사이드 이펙트 로직을 하나의 훅으로 묶을 수 있음
• 리액트의 내장 훅은 일반 함수에서는 사용할 수 없으므로, 내장 훅을 활용하려면 커스텀 훅을 작성해야 함
• 커스텀 훅의 이름은 리액트 훅임을 명시적으로 나타내기 위해 useXXX 형태로 작성하는 것이 권장됨
  • 예: useFetch, useLocalStorage 등

훅 사용 시 주의사항

• 클래스 기반 컴포넌트에서는 훅을 사용할 수 없음
  • 훅은 함수형 컴포넌트 전용이며, 상태 관리 및 생명 주기 관련 기능을 함수형 컴포넌트 내에서만 사용할 수 있음
• 훅은 함수 컴포넌트의 최상위에서만 호출해야 함
  • 훅을 반복문, 조건문, 중첩 함수 내에서 호출하면 컴포넌트가 렌더링될 때마다 호출 순서가 달라져서 문제를 일으킬 수 있음
  • 훅의 호출 순서가 바뀌면 리액트는 훅의 상태를 추적할 수 없어서 에러가 발생할 수 있음
• 훅은 항상 동일한 순서로 호출되어야 함
  • 각 렌더링마다 동일한 순서로 훅이 호출되어야 하므로, 조건문이나 반복문 내에서 훅을 호출하는 패턴을 피해야 함

📜 07 customHook - useCounter 커스텀 훅 사용

• 💻 App.tsx
• 💻 Price.tsx
• 💻 Product.tsx
• 💻 Shipping.tsx