React에서 useMemo 훅은 어떻게 사용하나요?

Q1: useMemo 훅이란 무엇인가요?
useMemo는 React에서 계산 비용이 높은 함수의 결과를 메모이제이션해서 불필요한 재계산을 방지하고 성능을 최적화하기 위한 훅입니다.

Q2: useMemo의 기본 문법은 어떻게 되나요?
```jsx
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
첫 번째 인자로 함수(callback)를 받고, 두 번째 인자로 의존성 배열을 받습니다. 의존성 배열 내 값이 변경될 때만 함수가 재실행됩니다.

Q3: useMemo는 언제 사용해야 하나요?
- 복잡한 계산 함수가 있고, 매 렌더마다 같은 결과가 호출될 필요가 없을 때
- 렌더링 성능을 최적화하고 싶을 때
- 컴포넌트가 불필요하게 무거운 연산을 반복하지 않도록 할 때

Q4: useMemo와 useCallback의 차이는 무엇인가요?
- useMemo는 값(결과값)을 메모이제이션
- useCallback은 함수를 메모이제이션
즉, useMemo는 반환값을 저장하고, useCallback은 함수를 저장합니다.

Q5: useMemo 사용 시 주의할 점은?
- 지나친 사용은 오히려 성능 저하를 일으킬 수 있으므로, 실제 연산 비용이 큰 경우에만 사용하세요.
- 의존성 배열을 정확하게 관리해야 하며, 의존성 누락 시 버그가 생길 수 있습니다.
- 메모이제이션한 값에 직접적인 변화를 주지 말고 불변성을 유지하는 것이 좋습니다.

Q6: 간단한 예제 코드를 보여주세요.
```jsx
import React, { useMemo, useState } from 'react';

function ExpensiveComponent({ num }) {
const computeFactorial = (n) => { console.log('Calculating factorial...');
return n <= 1 ? 1 : n * computeFactorial(n - 1);
};

const factorial = useMemo(() => computeFactorial(num), [num]);

return ;
}

export default function App() {
const [number, setNumber] = useState(5);
const [text, setText] = useState('');

return (
<>

setText(e.target.value)} placeholder="Type here" />
setNumber(number + 1)}>Increase Number

);
}
```
위 예제에서 `computeFactorial` 함수는 숫자가 변경될 때만 재계산됩니다.

Q7: useMemo와 React의 렌더링 관련 동작은 어떻게 연결되나요?
useMemo는 컴포넌트가 렌더링될 때 호출되지만, 내부 콜백 함수의 결과 값은 의존성 배열에 있는 값이 변경된 경우에만 재계산됩니다. 즉, 렌더링은 항상 발생하지만, 값 재계산은 조건부로 발생합니다.

---

이상으로 React의 useMemo 훅 사용방법 및 주의사항 FAQ였습니다.

React에서 최신 버전의 주요 변경 사항은 무엇인가요?

리액트의 "useState" 훅을 사용하는 방법과 그 기능은 무엇인가요?

React에서 `useMemo` 훅은 성능 최적화를 위해 사용되는 훅입니다.

이 훅은 특정 값의 계산 결과를 메모이제이션(memoization)하여, 의존성 배열에 있는 값이 변경되지 않는 한 이전에 계산한 결과를 재사용합니다.

이를 통해 불필요한 재계산을 방지하고, 렌더링 성능을 향상시킬 수 있습니다.

기본 사용법 `useMemo`는 두 개의 인자를 받습니다: 1. 계산할 함수 : 메모이제이션할 값을 반환하는 함수입니다.



2. 의존성 배열 : 이 배열에 있는 값이 변경될 때만 계산 함수가 다시 실행됩니다.

```javascript import React, { useMemo } from 'react'; const MyComponent = ({ items }) => { const expensiveCalculation = (items) => { // 복잡한 계산 로직 return items.reduce((acc, item) => acc + item.value, 0); }; const totalValue = useMemo(() => expensiveCalculation(items), [items]); return

Total Value: {totalValue}

; }; ``` 위의 예제에서 `expensiveCalculation` 함수는 `items` 배열의 값을 기반으로 총합을 계산합니다.

`useMemo`를 사용하여 `items`가 변경될 때만 이 계산이 수행되도록 하였습니다.

만약 `items`가 변경되지 않는다면, 이전에 계산된 `totalValue`를 재사용합니다.

언제 `useMemo`를 사용해야 할까? 1. 비용이 큰 계산 : 계산이 복잡하거나 시간이 많이 걸리는 경우, `useMemo`를 사용하여 성능을 최적화할 수 있습니다.



2. 렌더링 성능 향상 : 컴포넌트가 자주 렌더링되지만, 특정 값이 변경되지 않는 경우 메모이제이션을 통해 불필요한 계산을 피할 수 있습니다.



3. 자식 컴포넌트에 props 전달 : 자식 컴포넌트에 props로 객체나 배열을 전달할 때, 해당 객체나 배열이 매번 새로 생성되는 것을 방지하기 위해 `useMemo`를 사용할 수 있습니다.

주의사항 - 불필요한 사용 피하기 : `useMemo`는 성능 최적화를 위한 도구이지만, 모든 경우에 사용해야 하는 것은 아닙니다.

간단한 계산이나 렌더링에서는 오히려 성능 저하를 초래할 수 있습니다.

- 의존성 배열 관리 : 의존성 배열을 정확하게 관리해야 합니다.

배열에 포함된 값이 변경될 때만 메모이제이션된 값을 업데이트해야 하므로, 필요한 모든 의존성을 포함해야 합니다.

- React의 최적화 : React는 자체적으로 최적화를 수행하기 때문에, `useMemo`를 사용하지 않아도 성능이 좋을 수 있습니다.

따라서 성능 문제가 발생할 때만 사용하는 것이 좋습니다.

결론 `useMemo` 훅은 React에서 성능 최적화를 위해 매우 유용한 도구입니다.

복잡한 계산을 메모이제이션하여 불필요한 재계산을 방지하고, 렌더링 성능을 향상시킬 수 있습니다.

그러나, 이 훅을 사용할 때는 필요성과 의존성 배열 관리를 신중하게 고려해야 하며, 불필요한 사용은 피하는 것이 좋습니다.