UseEffect, UseMemo, React.Memo

UseEffect

• 목적
  • 부수 효과 처리
  • 컴포넌트가 렌더링 된 이후에 실행되며, 비동기 작업, DOM, 이벤트 등록을 처리
  • 특정 의존성 변화에 따라 부수 효과를 다시 실행하거나 정리함
• 특징
  • 의존성 배열이 없으면, 렌더링 될때마다 실행
  • 의존성 배열이 있으면, 해당값이 변경될 때만 실행
  • 클린업 함수로 리소스 정리 가능
• 사용처
  • 데이터 요청
  • DOM 조작
  • 이벤트 리스너 등록 및 해제
  • 상태 변화에 따른 외부 작업 실행

UseMemo

• 목적
  • Memoization을 최적화해 불필요한 재계산을 방지
  • 특정 의존성이 변경 될 때만 메모이제이션된 값을 재계산
• 특징
  • 의존성 배열을 기준으로 메모이제이션된 값을 반환
  • 렌더링 시점에 값 계산이 발생하며, 이전 값을 재사용
  • 렌더링 시, 값이 동일하면 기존 계산 결과를 반환함
• 사용처
  • 계산 비용이 높은 작업 (필터링, 정렬)
  • 렌더링 시마다 반복적으로 호출되는 함수에서 불필요한 계산을 방지함

React.Memo

• 목적
  - 컴포넌트 재렌더링을 방지해 성능 최적화
  • 부모 컴포넌트가 렌더링 될때 props가 변경되지 않았다면 자식 컴포넌트를 리렌더링 하지 않음
• 특징
  • props를 비교해 이전값과 동일하면 재렌더링 하지 않음
• 사용처
  부모 컴포넌트는 자주 렌더링 되나 자식 컴포넌트의 props가 자주 변경되지는 않을 때

UseEffect와 UseMemo의 차이

• UseEffect는 사이드 효과를 처리하기 위한 도구
  DOM 조작, API 호출, 이벤트 리스너 등록과 같은 렌더링 외부에서 발생하는 작업을 처리하기 위한 것. 이 효과들을 useMemo로 대체 불가

//잘못된 사용
const fetchData = useMemo(() => {
    fetch("/api/data") // 부수 효과
        .then(response => response.json())
        .then(data => setData(data));
}, []); // 잘못된 사용: `useMemo`는 반환값이 필요

• useMemo는 계산 비용이 큰 작업에만 사용
  • useMemo는 값 계산(필터링,정렬,복잡한계산)에 특화되어 있음
  • 값이 자주 변경되지 않고, 계산 비용이 큰 경우에만 사용해야 효과가 있음