React.memo 번역

리액트의 memo는 higer order component다.

클래스에서 사용되는 PureComponent와 비슷하다.

 

React.memo로 렌더링 될 함수 컴포넌트를 감싸주면 

마지막에 렌더링된 값을 기억했다가 

내려오는 props가 같을 때 렌더링을 건너 뛰고

기억했던 값을 재사용한다.

 

React.memo는 props의 변화만 체크한다.

memo로 감싸준 함수 컴포넌트에 useState나 useContext를 사용하면

state나 context가 변할 때에는 다시 렌더링한다.

 

기본적으로는 props에 있는 객체들을 얕은(shallowly) 방식으로 비교하지만

두 번째 인자를 활용해서 사용자가 원하는 방식으로 비교할 수도 있다.

 

이 함수는 오직 성능 최적화를 위해서 존재한다.

렌더링을 막기 위한 목적으로 사용해서는 안 된다.

버그가 발생할 수 있다.

 

참고 : https://reactjs.org/docs/react-api.html#reactmemo