[React] (리액트 공부하기 15) useMemo

useMemo는 React에서 비싼 계산 작업을 메모이제이션(Memoization)하여 렌더링 성능을 최적화하기 위해 사용되는 Hook이다.

---

1. useMemo란?

목적:
계산 비용이 높은 작업이 반복적으로 실행되는 것을 방지하기 위해 사용한다.

동작 원리:

• useMemo는 특정 의존성(배열) 값이 변하지 않으면 기존에 계산한 값을 재사용한다.
• 의존성 값이 변하면 새롭게 계산을 수행한다.

---

2. 기본 사용법

const memoizedValue = useMemo( () => computeExpensiveValue(a, b), [a,b] );

• 첫 번째 인자: 계산 작업(함수)
• 여기서는 computeExpensiveValue(a,b)처럼 계산해야 할 작업을 전달한다.
• 두 번째 인자: 의존성 배열
• a와 b라는 값이 변할 때만 computeExpensiveValue를 다시 호출 한다.
• 의존성 값이 변하지 않으면 기존 계산 값을 재사용 한다.

---

3. 왜 필요한가?

React는 상태(state)나 props가 변경되면 컴포넌트 전체를 다시 렌더링한다. 렌더링 과정에서 불필요하게 무거운 계산이 반복되면 성능 문제가 생길 수 있다.

예제1: 비싼 계산 작업

function App({ a, b }) {
    const memoizedValue = useMemo(() => {
        console.log("비싼 계산 중...");
        return a + b
    }, [a,b]);

    return <div>결과: {memoizedValue}</div>;
}

• a와 b가 변하지 않는다면 "비싼 계산 중..."은 다시 실행되지 않는다.
• 이점: 필요할 때만 계산을 수행하므로 불필요한 리소스 소모를 줄일 수 있다.

---

4. 의존성 배열의 중요성

useMemo는 의존성 배열에 명시된 값이 변할 때만 계산 작업을 다시 실행한다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), []);

• 의존성 배열이 []로 비어 있으면, 컴포넌트가 처음 렌더링 될 때만 계산을 수행하고 이후에는 값을 재사용 한다.
• 만약 의존성 배열을 올바르게 설정하지 않으면, 의도치 않게 오래된 값이 반환되거나, 불필요한 계산이 발생할 수 있다.

---

5. React에서 useMemo의 역할

1. 렌더링 최적화:

• 컴포넌트가 다시 렌더링 될 때 매번 실행할 필요가 없는 계산을 방지한다.

2. 불필요한 재연산 방지:

• 동일한 입력값에 대해 이미 계산한 결과를 재사용한다.

---

6. 주의사항

• 모든 계산에 useMemo를 사용할 필요는 없다. 비싼 계산일 때만 사용한다.
• 너무 자주 사용하면 코드가 복잡해질 수 있다.

---

7. 결론

useMemo는 렌더링 성능을 최적화하기 위해 계산 작업을 메모이제이션하는 Hook이다.
의존성 배열을 잘 설정해야 예상대로 동작하며, 잘못된 설정은 오히려 오류를 유발할 수 있으니 주의해야 한다.