React. Component vs.PureComponent vs memo

React.Component와 React.PureComponent React.memo를 비교해보자!🥰

React Component 는

• React.Component
• React.PureComponent
  로 나누어 정의됩니당!🥳

---

React.Component : ES6 class를 사용해 React Component를 정의할때 기초가 되는 class이다.

class Hello extends React.Component{
	render() {
    	return <h1> Hello, {this.props.name}
    }
}

React.PureComponent : shouldComponentUpdate()를 구현하지 않지만 props,state를 통해 shallow 비교를 구현한다는 차이가 있음!

props와 state에 대해 동일한 결과를 렌더링한다면 React.PureComponent를 사용해
성능향상을 할 수 도 있다!

---

React.memo : Higher Order Component

const MyComponent = React.memo (function MyComponent(props){});

동일한 props로 동일한 결과를 렌더링한다면
React.memo를 호출해 결과를 메모이징 (Memoizing)하도록 래핑한다.
React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링된 결과를 재사용하게 됨!
React.memo는 props변화에만 영향을 줌
React.memo로 감싸진 함수 컴포넌트 구현에 useState, useContext hook을 쓰면
state,context의 변화에 따라 다시 렌더링된다.
props가 갖는 객체에 대해 얕은 비교만을 수행하는것이 기본이다

function MyComponent(props){
	/*props를 사용해 렌더링*/
}
function areEqual(prevProps,nextProps){

	/*
    nextProps===prevProps :true
    nextProps!==prevProps :false
    */
}

export default React.memo(Mycomponent,areEqual);

React.memo는 오직 성능 최적화를 위해 사용되는것이다!

출처: https://ko.reactjs.org/docs/react-api.html

---