react 성능 최적화

React는 컴포넌트 기반 라이브러리로, 상태나 props가 변경되면 관련된 컴포넌트를 다시 렌더링한다다. 하지만 불필요한 렌더링은 성능 문제를 야기할 수 있으므로 이를 방지하기 위해 적절하게useMemo, useCallback, React.memo등과 같은 도구를 이

useMemo는 값을 메모이제이션하는 데 사용된다. 특정 계산 비용이 큰 값을 다시 계산하지 않고, 의존성 배열의 값이 변경될 때만 계산하도록 한다.계산 비용이 높은 작업(예: 배열 합산, 정렬, 필터링 등)을 최적화할 때useMemo는 계산 비용이 클 때만 유용하다.

useCallback은 함수를 메모이제이션하는 데 사용된다. 컴포넌트가 다시 렌더링되더라도 동일한 함수 인스턴스를 유지한다.자식 컴포넌트에 함수를 props로 전달할 때, 불필요한 렌더링을 방지하기 위해 사용의존성 배열을 정확히 설정하지 않으면 함수가 갱신되지 않을 수

useMemo, useCallback, React.memo를 간단하게 비교할 수 있다.