shouldComponentUpdate() 또는 **React.memo()**를 사용하여 불필요한 렌더링을 방지합니다.
이를 통해 필요한 경우에만 컴포넌트가 렌더링되도록 할 수 있습니다.
shouldComponentUpdate는 React 컴포넌트의 라이프사이클 메서드 중 하나로, 컴포넌트가 업데이트 되어야 할지를 결정하는 메서드입니다.
이 메서드를 사용하여 불필요한 렌더링을 방지하고 성능을 최적화할 수 있습니다.
shouldComponentUpdate(nextProps, nextState) {
// return true or false
}
shouldComponentUpdate 메서드는 현재 props와 state, 그리고 다음에 적용될 props와 state를 인자로 받습니다. 메서드에서 true를 반환하면 컴포넌트가 업데이트 되고, false를 반환하면 업데이트가 되지 않습니다.
import React, { Component } from 'react';
class MyComponent extends Component {
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.value === this.props.value) {
return false;
}
return true;
}
render() {
return <div>{this.props.value}</div>;
}
}
위 예제에서, shouldComponentUpdate 메서드는 다음 props가 현재 props와 동일한지를 확인하고,
동일하다면 렌더링을 하지 않도록 설정합니다.
이렇게 하면 props가 변경되었을 때만 렌더링을 하므로, 불필요한 렌더링을 방지할 수 있습니다.
**shouldComponentUpdate**를 사용하면 불필요한 렌더링을 방지할 수 있기 때문에 성능이 향상됩니다.
특히, props나 state가 자주 변경되는 경우에 사용하면 효과적입니다.
그러나, shouldComponentUpdate 메서드를 구현하는 것은 추가적인 코드를 작성해야 하기 때문에,
코드의 가독성과 유지보수성을 고려하여 적절하게 사용하는 것이 중요합니다.
또한, shouldComponentUpdate 메서드를 잘못 구현하면 컴포넌트가 렌더링되지 않거나,
불필요하게 렌더링되는 등의 문제가 발생할 수 있으므로 주의해야 합니다.
하지만 함수형 컴포넌트에서는 shouldComponentUpdate 메서드를 사용할 수 없기 때문에, React에서 제공하는 useMemo 훅을 사용하여 컴포넌트의 성능을 최적화할 수 있습니다.
이는 아래에서 다시 설명드리겠습니다.
**React.memo()**는 React에서 제공하는 고차 컴포넌트(HOC)로, 컴포넌트를 래핑하여 리렌더링 성능을 최적화하는 데 사용됩니다.
기본적으로 **React.memo()**는 컴포넌트가 받는 props가 변경되지 않았다면, 이전에 렌더링된 결과를 재사용하여 리렌더링을 방지합니다.