[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 7일차

Memoization

• 이전에 계산 결과를 메모리에 저장함으로써 동일한 계산이 요청될 때 다시 계산하지 않고 저장된 값을 반환하는 최적화 기법으로 이전에 계산한 값을 재사용하기 때문에 성능을 향상시킬 수 있다

React.Memo

• 컴포넌트를 메모이제이션 할 때 사용되고 부모 컴포넌트가 리렌더링 될 때 props가 변경되지 않았다면 자식 컴포넌트는 리렌더링 되지 않는다.

import React from 'react';

const testComponent = ({ props}) => {
    return (
       <div>{props}</div>
    );
};

export default React.memo(MyComponent);

=> 부모 컴포넌트가 리렌더링 될 때 props가 변경되지 않으면 testComponent는 리렌더링이 되지않는다.
즉 동일한 props가 전달될 때 이전에 렌더링된 결과를 재사용한다. 그래서 불필요한 리렌더링을 방지해 성늘 최적화를 할 수 있다.

useCallback

• 함수를 메모이제이션 할 때 사용되고 렌더링 중에 특정 값이 변경되었을 때만 함수를 생성하고 그렇지 않으면 이전에 생성한 함수를 재사용한다.

import React, { useState, useCallback } from 'react';

const ParentComponent = () => {
    const [count, setCount] = useState(0);
    
    const handleClick = useCallback(() => {
        setCount(count + 1);
    }, [count]);
    
    return (
        <div>
            <MyButton onClick={handleClick} />
            <div>Count: {count}</div>
        </div>
    );
};

=> handleClick 함수의 의존성 배열에 count가 포함되어 count가 변경될 때마다 handleClick 함수가 새로 생성된다.

함수 내부에서 사용되는 상태나 프롭스는 종속성 배열에 추가하지 않으면 최신 값을 참조하지 못할 수 있다.

useMemo

• 값을 메모이제이션 할 때 사용되고 렌더링 중에 특정 값이 변경되었을 때만 함수를 실행하고 그렇지 않으면 이전에 계산한 값을 재사용한다.

import React, { useState, useMemo } from 'react';

const ParentComponent = () => {
    const [count, setCount] = useState(0);
    
    const expensiveCalculation = useMemo(() => {
        return count * 2;  // 예를 들어 매우 비싼 계산이라고 가정합니다.
    }, [count]);
    
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <div>Result: {expensiveCalculation}</div>
        </div>
    );
};

=> expensiveCalculation 함수의 의존성 배열의 count값이 변경되었을 때만 다시 계산하여 새로운 값을 반환하고 그렇지 않으면 이전 값을 재사용한다.

---

🖇️ 후기

메모이제이션에 대해 다시 복습을 해야겠다.

---