[230818] useMemo , Custom hook

useMemo

• data 의 값이 변경될때만 재계산
• 계산 결과를 기억하므로 불필요한 계산을 줄이고 성능 개선 가능
• 주로 계산 비용이 큰 연산,함수 호출, 렌더링 결과, 렌더링을 위한 가공 등에 사용
• 두 개의 매개 변수 받음
  • 첫 번째 : 계산된 값을 반환하는 함수
  • 두 번째 : 의존성 배열 (어떤 값이 변경될 때마다 첫번째 함수 다시 실행) ```js import { useMemo } from ‘react’;

function ComplexCalculationComponent({ data }) { const result = useMemo(() => { // 복잡한 계산을 수행하는 함수 let sum = 0; for (let i = 0; i < data.length; i++) { sum += data[i]; } return sum; }, [data]); // data가 변경될 때만 재계산

return <div>계산 결과: {result}</div>; }

```

Custom hook

• React 로직을 분리하고 재사용 가능한 형태로 추상화 하는데 도움이 됨