<React> memo

class Component에 PureComponent가 있다면 function Component에는 memo가 있습니다. memo를 사용하여 얻는 이득과 이에 따른 주의사항은 PureComponent와 동일하기 때문에 사용법만 간단하게 알아보겠습니다.

greeting.jsx

name이 props에 담겨 전달되는 component입니다. memo 함수안에 인자로 콜백함수를 전달하듯이 함수를 전달해주면 됩니다.

import React, {memo} from 'react';

const Greeting = memo(props => {
  const {name} = props;
  return (
    <h1>Hello {name}</h1>
  );
});

export default Greeting;