[React] useCallback 그리고 React.memo

React에서 UI의 성능을 증가시키기 위해서 React.memo를 제공한다. 

 

React.memo는 렌더링의 결과를 메모이징해서 새로운 렌더링이 감지될 때, props가 같다면 

메모이징한 결과를 재사용한다. 

const compoenent = React.memo(({title, content}) => {
   return (
       <div>
           <div>{title}</div>
           <div>{content}</div>
       </div>
   )
})

다음과 같은 컴포넌트가 있다면, React.memo는 title과 content가 변경되지 않는다면 

메모이징된 결과를 다시 사용한다. 

 

const ParentsComponent = () => {
   return <Component title={...} content={...} onCheck={() => anyfuntion()}/>
}

부모 컴포넌트에서 자식 컴포넌트에게 상태값만 넘겨주는 것이 아닌, 아무개 함수를 넘겨주는 경우도

있을 것이다. 

 

이때 부모 컴포넌트가 리렌더링이 되면 onCheck에 해당하는 함수도 다시 만들어진다. 

즉, 똑같은 () => anyfunction 이라도 props를 비교했을 때는 false가 나오게 된다는 뜻이다. 

 

이때 사용하는 것이 useCallback으로 useCallback을 사용하면 의존하는 값이 변경되지 않는다면 

함수를 새롭게 만들지 않는다. 

 

이런 좋은 기능은 무조건 쓰면 될까? 

보통 이런 질문이 나오면 대답은 No 가 된다. 여기서도 대답은 No이다.

 

React.memo는 같은 props로 렌더링이 많이 일어나는 컴포넌트에만 사용하는 것이 유용한다. 

부모 컴포넌트에서 같은 props로 리렌더링이 자주 발생하거나,

컴포넌트 내부에서 큰 연산이 있는 경우에 React.memo를 사용하면 이점을 누릴 수 있다. 

 

그렇다면 왜 React.memo를 난사하면 안될까? 

 

리렌더링이 발생할 때 props가 다른 경우가 대부분일텐데, props가 자주 변하는 컴포넌트를 

React.memo를 사용해서 메모이징을 하면 리렌더링이 발생할 때마다 

 

이전 props와 다음 props를 비교하는 함수를 수행하고, 다시 이전 렌더링과 다음 렌더링을 비교한다. 

즉 쓸대없는 비교를 많이하게 된다.