[React]메모이제이션으로 불필요한 렌더링 줄이기

React 에서는 다양한 이유로 컴퍼넌트가 리렌더링 되곤 합니다.
불필요한 렌더링은 성능저하의 원인이 되거나, 유저에게 안좋은 경험으로 이어질 수 있습니다.

 

그렇다면 어떻게 불필요한 렌더링을 줄일 수 있을까요?

개선 전 코드

export default function App() {
	
	return (
		...
		<SpecialComponent>
		...
	)
}

 

SpecialComponent라는 가상의 컴퍼넌트가 있는데,

이 컴퍼넌트가 불필요하게 렌더링 된다면

메모이제이션으로 이를 간단하게 해결할 수 있습니다.

 

개선 후 코드

export default function App() {
	const specialComponent = React.useMemo(() => {
			<SpecialComponent>    	
    },[dependency...])
	return (
		...
		{specialComponent}
		...
	)
}

 

위처럼 메모이제이션을 통해 불필요한 렌더링이 발생을 막을 수 있습니다.

 

그렇다면 모든 곳에 메모이제이션을 사용하면 성능이 최적화되는 걸까?

그렇지 않습니다.

메모이제이션을 한다는 것은

어떤 한 곳에서 데이터를 갖고 저장하기 한다는 뜻입니다.

이 말은 메모이제이션을 모든 곳에 사용하게 된다면, 오히려 성능에 저하가 올 수 있습니다.