[데브코스/TIL] DAY52~53 - 메모이제이션

🚀 리액트 훅

useEffect

• 함수형 컴포넌트에서 생명주기를 다룰 때 사용하는 리액트 훅
  • 생명주기 : 컴포넌트가 태어나고 죽을 때까지
• 렌더링 이후의 Side Effect를 발생시키는 역할
• useEffect(콜백 함수, 의존성 배열)
• 클린업 함수
  • 컴포넌트가 언마운트되기 직전 실행시키는 함수

useEffect(() => {
	const interval = setInterval(() => {
		console.log("interval");
	}, 1000);

	// 클린업 함수
	return () => {
		clearInterval(interval);
	};
}, []);

🚀 메모이제이션

🔍 메모이제이션이란?
중복 계산을 피하기 위해 계산 결과를 저장해두고, 동일한 입력 값에 대해서는 이미 계산된 결과를 재사용하는 방법

1. React.memo()

• 컴포넌트 메모이제이션
  • const MyComponent = React.memo(() => {})
• 동일한 props로 렌더링될 경우, 이전 렌더링 결과 재사용 ⇒ 불필요한 리렌더링 방지
• 함수형 컴포넌트에서만 사용 가능
• props가 자주 변경되거나 비교하는 cost가 높다면 오히려 성능 저하 초래

const MyComponent = React.memo(({ count }) => {
	return <div>{count}</div>
})

2. useCallback()

• 리액트 훅, 함수 메모이제이션
• 컴포넌트가 리렌더링될 때 동일한 함수 인스턴스를 유지할 수 있도록
• 의존성 배열에 있는 값이 변경되지 않는다면, 메모이제이션 된 함수 재사용

import { useState, useCallback } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return <button onClick={increment}>Increment</button>;
};

3. useMemo()

• 리액트 훅, 값 메모이제이션
• 컴포넌트가 리렌더링될 때 복잡한 계산을 반복하지 않도록
• 의존성 배열에 있는 값이 변경되지 않는다면, 이전 계산 결과 재사용

const MyComponent = () => {
	const [count, setCount] = useState(0);
	
	const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);
  
   return (
    <div>
      <p>Result: {expensiveCalculation}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
}

정리

기능	React.memo	useCallback	useMemo
사용 목적	컴포넌트 재렌더링 방지	함수 재생성 방지	계산 재실행 방지
리턴 값	메모이제이션된 컴포넌트	메모이제이션된 함수	메모이제이션된 계산 결과
사용 대상	컴포넌트	함수	값
주요 사용 시점	props가 변경되지 않을 때	콜백을 자식 컴포넌트에 전달할 때	복잡한 연산이 필요할 때

📌 출처

수코딩(https://www.sucoding.kr)