Click the button
; }; ``` 위의 코드는 버튼을 클릭했을 때 `count`가 1씩 더해지는 간단한 예제이다. 버튼을 클릭하면 `App`, `CounterButton`, `Description` 컴포넌트가 모두 리렌더링된다. 그러나 `Description` 컴포넌트가 다시 리렌더링되어야 할 필요가 있을까? `Description` 컴포넌트는 `count`의 변경에 관계없이 동일한 결과로 렌더링될 것이다. 만약 `Description` 컴포넌트가 많은 하위 컴포넌트 또는 로직을 포함하고 있어 리렌더링하는 데 많은 리소스가 소요된다면, 불필요한 리렌더링에 의한 성능 문제가 발생할 수 있다. 이러한 '불필요한 리렌더링' 문제를 해결하기 위해 React에서는 컴포넌트, 값, 함수를 메모이제이션하는 `memo`, `useMemo`, `useCallback` API를 제공한다. ### memo > 컴포넌트의 props가 변경되지 않은 경우, 컴포넌트 리렌더링을 건너뛸 수 있게 한다.\ > \- [React 공식 문서](https://react.dev/reference/react/memo) [불필요한 리렌더링](#undefined)의 예제에서, `count` 상태의 변경으로 인한 `Description` 컴포넌트의 리렌더링을 막는 데 `memo`를 사용할 수 있다. ```jsx const Description = memo(() => { returnClick the button
; }); ``` `Description` 컴포넌트를 위와 같이 변경하면, `CounterButton`을 클릭해도 `Description` 컴포넌트가 리렌더링되지 않는다. #### memo는 만능이 아니다 컴포넌트를 `memo`로 감쌌음에도 불구하고, 리렌더링되는 몇 가지 사례가 있다. 1. **props가 변경되었을 때** ```jsx const CounterButton = memo(({ count, onClick }) => { return ; }); ``` `CounterButton` 컴포넌트는 `count` 상태가 변경되면 리렌더링된다. `onClick` 함수가 변경되었을 때에도 마찬가지이다. 당연한 것처럼 보이지만 이는 의도되지 않은 동작을 발생시킬 수 있다. React는 얕은 비교를 통해 props를 비교한다. 얕은 비교로 객체나 배열, 함수를 비교하면, 이전의 값과 동일하더라도 참조가 동일한지에 대한 여부를 따진다. 그러므로 상위 컴포넌트에서 렌더링할 때마다 객체, 배열, 함수를 다시 생성한다면 memo된 컴포넌트 또한 props가 변경된 것으로 간주해 리렌더링을 발생시킨다. 이를 방지하기 위해 `useMemo`, `useCallback`을 사용하거나, 이후 설명할 `arePropsEqual` 파라미터를 사용할 수 있다. 2. **컴포넌트 내부의 상태가 변경되었을 때** 3. #### `arePropsEqual` 값이 false일 때 `memo` HOC(고차 컴포넌트)에는 두 번째 인자로 `arePropsEqual` 파라미터를 추가할 수 있다. ```jsx const Chart = memo(({ points }) => { ... }, (oldProps, newProps) => { return ( oldProps.points.length === newProps.points.length && oldProps.points.every((oldPoint, index) => { const newPoint = newProps.points[index]; return oldPoint.x === newPoint.x && oldPoint.y === newPoint.y; }) ); }); ``` 위 예제의 `arePropsEqual` 함수는 `points` 객체의 값이 변경되었는지를 확인해, 변경되지 않았다면 `true`, 변경되었으면 `false`를 반환한다. 참조가 아닌 값을 비교하기 때문에 `points`가 부모 컴포넌트에서 재생성되어 참조가 변경되어도, 값이 변하지 않았다면 `Chart` 컴포넌트는 리렌더링되지 않는다. 하지만 이 방법 또한 만능은 아니다. React 공식 문서에서는 `arePropsEqual` 사용 시 모든 props를 비교해야 하며, prop의 데이터 구조 깊이가 제한되어 있지 않다면 깊은 비교를 수행하지 말라고 권고하고 있다. ([공식 문서](https://react.dev/reference/react/memo#specifying-a-custom-comparison-function)) 4. **컴포넌트 내부에서 Context를 사용하고 있을 때** ```jsx const CounterButton = memo(({ onClick }) => { const { count } = useContext(globalContext); return ; }); ``` 위 예제에서 `globalContext`의 `count` 상태가 변경된다면 `CounterButton`이 리렌더링된다. 여기서 주의할 점은 `globalContext`에 다른 상태가 존재하고, 이 상태가 변경된다면 `CounterButton`에서 그 상태를 사용하고 있지 않음에도 리렌더링된다는 것이다. 이를 방지하는 방법은 `useContext` 사용부를 부모 컴포넌트로 이동시켜, `count`를 props로 전달하는 것이다. ### useMemo > 리렌더링 간에 계산 결과를 캐싱한다.\ > \- [React 공식 문서](https://react.dev/reference/react/useMemo#my-calculation-runs-twice-on-every-re-render)const Chart = ({ data, ... }) => {
const points = calculatePoints(data);
const memorizedPoints = useMemo(
() => calculatePoints(data),
[data]
);
return <ChartInner points={points} />
}
const ChartInner = memo(({ points }) => ...)