React.memo는 무엇인가요?

Q1: React.memo란 무엇인가요?
A1: React.memo는 리액트에서 함수형 컴포넌트를 메모이제이션(memoization)하여 불필요한 리렌더링을 방지하는 고차 컴포넌트(HOC)입니다. 동일한 props가 전달되면 이전 렌더링 결과를 재사용하여 성능 최적화에 도움을 줍니다.

Q2: React.memo는 어떻게 사용하나요?
A2: 함수형 컴포넌트를 React.memo로 감싸면 됩니다. 예를 들어:
```jsx
const MyComponent = React.memo(function MyComponent(props) {
// 컴포넌트 내용
});
```

Q3: React.memo는 클래스형 컴포넌트에도 적용할 수 있나요?
A3: 아니요, React.memo는 함수형 컴포넌트 전용입니다. 클래스 컴포넌트에는 PureComponent를 사용하여 비슷한 최적화를 할 수 있습니다.

Q4: React.memo가 작동하는 원리는 무엇인가요?
A4: React.memo는 기본적으로 얕은(shallow) 비교를 사용해 이전 props와 새로운 props를 비교합니다. 동일한 경우 이전에 렌더링된 결과를 재사용하여 컴포넌트를 다시 렌더링하지 않습니다.

Q5: React.memo에 커스텀 비교 함수를 전달할 수 있나요?
A5: 네, 두 번째 인자로 비교 함수(areEqual)를 전달할 수 있습니다. 이 함수는 (prevProps, nextProps)를 인자로 받고 true를 반환하면 리렌더링을 방지합니다. 예: ```jsx
const MemoizedComponent = React.memo(Component, (prevProps, nextProps) => {
// true면 리렌더링 방지
});
```

Q6: React.memo를 무조건 써야 하나요?
A6: 아니요, React.memo는 모든 컴포넌트에 쓸 필요는 없습니다. 오히려 너무 자주 사용하면 비교 비용으로 인해 오히려 성능이 떨어질 수 있으므로, 렌더링 비용이 크거나 자주 리렌더링되는 컴포넌트에 적절히 사용해야 합니다.

Q7: React.memo와 useMemo의 차이점은 무엇인가요?
A7: React.memo는 컴포넌트 자체의 리렌더링을 최적화하는 반면, useMemo는 컴포넌트 내부에서 계산된 값을 메모이제이션하는 훅입니다. 각각 용도가 다릅니다.

Q8: React.memo는 상태(state)가 바뀌어도 리렌더링을 막나요?
A8: 아니요. React.memo는 부모 컴포넌트로부터 전달받은 props에 대해서만 비교하므로, 컴포넌트 내부 상태(state)가 변하면 리렌더링됩니다.

Q9: React.memo를 사용할 때 주의할 점은 무엇인가요?
A9: 복잡한 객체나 함수 props를 전달할 때는 참조값이 바뀌면 리렌더링이 일어나므로, useCallback이나 useMemo로 props 값을 안정화시키는 것이 좋습니다.

Q10: React.memo 사용 후 디버깅이 어렵거나 예상외로 렌더링되는 경우 어떻게 해야 하나요?
A10: React Developer Tools의 profiling 기능을 이용해 렌더링 원인을 분석하거나, 커스텀 비교 함수를 작성해 props 비교 방식을 직접 지정하는 방법이 있습니다.

`React.memo`는 React에서 제공하는 고차 컴포넌트(Higher Order Component)로, 주로 성능 최적화를 위해 사용됩니다.

이 기능은 컴포넌트가 동일한 props를 받을 때, 불필요한 리렌더링을 방지하여 애플리케이션의 성능을 향상시키는 데 도움을 줍니다.

기본 개념 React는 기본적으로 상태(state)나 props가 변경될 때마다 컴포넌트를 리렌더링합니다.

그러나 어떤 경우에는 props가 변경되지 않았음에도 불구하고 컴포넌트가 리렌더링되는 것이 비효율적일 수 있습니다.

`React.memo`는 이러한 상황에서 유용하게 사용됩니다.

사용법 `React.memo`는 함수형 컴포넌트를 감싸는 형태로 사용됩니다.

다음은 기본적인 사용 예시입니다.

```javascript import React from 'react'; const MyComponent = React.memo(({ name }) => { console.log('Rendering:', name); return

Hello, {name}!

; }); ``` 위의 예시에서 `MyComponent`는 `name` prop이 변경되지 않는 한 리렌더링되지 않습니다.

만약 부모 컴포넌트가 리렌더링되더라도 `name` prop이 동일하다면 `MyComponent`는 다시 렌더링되지 않습니다.

커스텀 비교 함수 기본적으로 `React.memo`는 얕은 비교(shallow comparison)를 사용하여 props의 변경 여부를 판단합니다.

그러나 필요에 따라 커스텀 비교 함수를 제공하여 더 복잡한 비교 로직을 구현할 수 있습니다.

다음은 그 예시입니다.

```javascript const MyComponent = React.memo( ({ name, age }) => { console.log('Rendering:', name); return

{name} is {age} years old.

; }, (prevProps, nextProps) => { return prevProps.name === nextProps.name && prevProps.age === nextProps.age; } ); ``` 위의 예시에서 커스텀 비교 함수는 `name`과 `age`가 모두 동일할 때만 리렌더링을 방지합니다.

언제 사용해야 할까? `React.memo`는 다음과 같은 경우에 유용합니다: 1. 리렌더링 비용이 높은 컴포넌트 : 복잡한 UI를 렌더링하는 컴포넌트는 리렌더링 비용이 크므로, `React.memo`를 사용하여 성능을 최적화할 수 있습니다.



2. 상태가 자주 변경되는 부모 컴포넌트 : 부모 컴포넌트의 상태가 자주 변경되지만, 자식 컴포넌트의 props는 자주 변경되지 않는 경우에 유용합니다.



3. 불변성 유지 : props가 불변성을 유지하는 경우, `React.memo`를 통해 성능을 더욱 향상시킬 수 있습니다.

주의사항 - `React.memo`는 모든 경우에 성능을 향상시키는 것은 아닙니다.

간단한 컴포넌트나 props가 자주 변경되는 경우에는 오히려 성능 저하를 초래할 수 있습니다.

- `React.memo`는 함수형 컴포넌트에만 적용됩니다.

클래스형 컴포넌트에는 사용할 수 없습니다.

- `React.memo`는 props가 변경되지 않는 경우에만 리렌더링을 방지하므로, 상태가 변경되는 경우에는 여전히 리렌더링이 발생합니다.

결론 `React.memo`는 React 애플리케이션에서 성능을 최적화하는 데 매우 유용한 도구입니다.

적절한 상황에서 사용하면 불필요한 리렌더링을 방지하고, 사용자 경험을 개선할 수 있습니다.

그러나 모든 컴포넌트에 적용하는 것은 바람직하지 않으며, 성능을 측정하고 최적화할 필요가 있습니다.