React.memo

백승용·2021년 4월 8일
0

React

목록 보기
10/14

React.memo를 사용하여 리렌더링을 방지한다. 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정가능하다.
같은 props로 렌더링이 자주 일어나는 컴포넌트가 있을 때 사용한다. 여러 props 중 한개의 props로 인해 렌더링이 자주 일어났을 때 React.memo를 사용하여 자주 발생하는 리렌더링을 다른 컴포넌트에서 방지하기 위해 사용한다.

성능적인 이점을 얻지 못한다면 메모이제이션을 사용하지 않는 것이 좋다. 또한, 클래스 컴포넌트에서 React.memo()로 래핑하는 것은 적절하지 않다. 클래스 컴포넌트에서 메모이제이션이 필요하다면 PureComponent를 확장하거나, shouldComponentUpdate() 메서드를 구현하는 것이 적절하다.

렌더링될 때 props가 다른 경우가 대부분인 컴포넌트를 생각해보면, 메모이제이션 기법의 이점을 얻기 힘들다.

React.memo를 적용하더라도 이벤트에서 콜백함수를 사용하게 되면 리렌더링을 방지할 수 없다. 그래서 useCallback을 사용하여 리렌더링을 방지한다.
참고링크

0개의 댓글