React.memo 고차 컴포넌트

이건 아예 랜더링 된 결과가 메모리에 캐싱된다.

 

이 랜더링 된 결과가 어떤 형식으로 들어가냐면,

왜 우리가 리액트 할 때

return(
	<></>
)

하면서 가상의 dom 요소들을 사용하는데,

저기에 변수같은게 아니라 값이 채워져 있는 형식으로 그 가상 요소가 메모리에 저장된다.

 

여튼 메모리에 캐싱되는 데이터는 저거고,

그러면 새로 다시 function을 재 랜더링 하는 트리거는 뭐냐면,

props다. 단 하나 props로 전달된 것의 값의 변화가 있을 시에만 얘가 재 랜더링을 한다.

 

사용 방법은

export default React.memo(컴포넌트);

그냥 이렇게 하면 된다.

딱 이게 끝이다.

이 상태로 있다가,

 

예를 들어

const TodoItems = ({message})=>{
  return(
    <div>
    	<span>{message}</span>
    </div>
  );
}

export default React.memo(TodoItems);

저 부모가 주고있는 message의 값이 바뀌엇을 때만 재 랜더링 한다.

 

message가 객체형식이라도 그 객체의 어떤 데이터의 값이 바뀌었다면 그것도 마찬가지다. 당연한 거다.