[React] 리액트 PureComponent/React.memo 컴포넌트 리렌더링 방지

 

 

 

PureComponent / React.memo

 

 

- 클래스형 컴포넌트의 경우

---

리액트에서는 state 값을 자동으로 체크하고 렌더링 여부를 결정해주는 컴포넌트를 PureComponent라 부른다. 일반적으로 사용하는 Component의 경우 같은 값으로 setState 할 경우 렌더링이 이루어지는데, 웹의 구성요소가 무수하게 많을 경우 엄청난 자원낭비가 발생한다.

 

이럴 경우 보통 PureComponent를 사용하면 좋다. 하지만 값이 변경 됬다 하더라도 랜더링하고 싶지 않을때도 있기 마련이다. 그럴경우 shouldComponentUpdate() 라이프 사이클을 사용하여 렌더링을 제어할 수 있다.

 

 

import React, { PureComponent } from 'react';

class BlahBlah extends PureComponent {
  state = {
    count: 0
  }
  
}

render() {
	return ( 
		....

 

 

- 함수형 컴포넌트의 경우

---

const { memo } = require("react");

const component = memo(() => {
	const [Todo, setTodo] = useState('');
	
	//...
    
    return(
    	//...
    );
});

 

보통 자식 컴포넌트에게 PureComponent나 useMemo를 사용하면 성능최적화에 도움이 된다. 극도의 최적화를 필요로한다면 shouldComponentUpdate()로 직접 커스터마이징 하면 좋을 듯 하다.