Pure Component
React의 클래스 컴포넌트 중 하나로, shouldComponentUpdate 메서드를 자동으로 구현하여 성능 최적화를 도와주는 컴포넌트이다.
일반적인 클래스 컴포넌트에서는 shouldComponentUpdate 메서드를 사용하여 새로운 props나 state가 변경되었을 때 컴포넌트가 리렌더링되어야 할지 여부를 결정하는데, 이 메서드를 개발자가 직접 작성해야 했다.
Pure Component는 shouldComponentUpdate 메서드를 내부적으로 이미 구현했으며, 얕은 비교(Shallow Comparison)를 통해 props와 state를 비교하여 변경 여부를 결정한다.
=> props와 state의 얕은 비교만으로도 컴포넌트가 업데이트되어야 할지를 판단할 수 있다.
Pure Component를 사용하면 shouldComponentUpdate 메서드를 작성하는 번거로움을 줄이고 성능을 향상시킬 수 있지만, 얕은 비교의 제약사항을 이해하고 적절히 활용해야 한다.
예시
import React, { PureComponent } from 'react';
class Counter extends PureComponent {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState(prevState => ({
count: prevState.count + 1
}));
};
render() {
return (
<div>
<h2>Count: {this.state.count}</h2>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}
export default Counter;이 예시에서는 PureComponent가 내부적으로 얕은 비교를 수행하기 때문에 업데이트될 때마다 리렌더링되는 것이 아니라, 카운터의 값이 변경될 때만 리렌더링된다.
Pure Component의 특징
성능 최적화
컴포넌트가 리렌더링되어야 하는지 여부를 자동으로 결정해 성능을 향상시킬 수 있다.
얕은 비교
props와 state의 얕은 비교를 통해 변경 여부를 판단한다.
객체나 배열의 경우, 레퍼런스가 변경되지 않으면 해당 객체나 배열은 동일하다고 간주된다.
주의사항
Pure Component를 사용할 때는 얕은 비교의 제약사항을 고려해야 한다.
객체나 배열 내부의 값이 변경되더라도 레퍼런스는 변하지 않으면 업데이트가 발생하지 않는다.
이런 경우에는 새로운 객체나 배열을 생성해 업데이트를 유도해야 한다.
PureComponent와 Component의 차이
Component
Component 클래스는 React 컴포넌트를 생성하기 위한 기본 클래스이다.
- Component 클래스는 일반적으로 shouldComponentUpdate 메서드를 구현하지 않는다.
=> 따라서 React 컴포넌트는 Component를 상속받아서 만들 때마다 업데이트가 필요한지 여부를 결정하기 위해 props와 state를 얕게 비교하지 않는다.
이는 컴포넌트가 업데이트될 때마다 리렌더링을 발생시킬 수 있다.
PureComponent
PureComponent 클래스는 Component 클래스를 확장한 특수한 종류의 컴포넌트이다.
- PureComponent는 shouldComponentUpdate 메서드를 내부적으로 구현하여, 컴포넌트의 props와 state가 변경되었을 때 얕은 비교(Shallow Comparison)를 수행한다.
=> 이를 통해 props와 state가 변경되지 않았다면 리렌더링을 방지하여 성능을 향상시킨다. - PureComponent를 사용하는 경우에는 props와 state가 변경되지 않았을 때 컴포넌트의 리렌더링을 방지할 수 있다.
=> 이는 불필요한 리렌더링을 방지하여 성능을 향상시킬 수 있다.
하지만 PureComponent를 사용할 때에는 객체나 배열과 같은 참조형(props나 state)의 얕은 비교의 제약사항을 고려해야 한다.
=> 따라서, PureComponent는 성능 최적화를 위해 사용되지만, 주의해야 할 점이 있으며, 모든 상황에서 사용될 수는 없다.
때로는 Component를 사용하여 직접 shouldComponentUpdate를 구현하는 것이 적절할 수도 있다.
shouldComponentUpdate
리액트는 언제 렌더링을 수행할까?
- props가 변경 되었을때
- state가 변경 되었을때
- 부모 컴포넌트가 렌더링 되었을때
부모 컴포넌트에서 상태를 변경하였지만 그 영향을 받지 않는 자식 컴포넌트 또한 불필요한 렌더링을 수행하여 성능 손실이 발생하게 된다.
이럴 때 SCU라는 라이프사이클 메서드를 사용한다!
React 클래스 컴포넌트에서 사용되는 라이프사이클 메서드 중 하나로, 컴포넌트가 리렌더링되어야 할지를 결정하는 데 사용된다.
기본적으로 shouldComponentUpdate는 true를 반환하며, 컴포넌트가 업데이트되어야 함을 나타낸다.
그러나 개발자는 이 메서드를 오버라이딩하여 자체적으로 업데이트 로직을 결정할 수 있다.
=> 예를 들어, 특정 조건이 충족되지 않으면 컴포넌트를 리렌더링하지 않도록 설정할 수 있다.
업데이트를 막는 방법
Props 또는 State가 변경되지 않은 경우
새로운 props나 state가 이전 props나 state와 동일한 경우에는 업데이트를 막을 수 있다.
특정 조건이 충족되지 않은 경우
특정 조건이 충족되지 않을 때에도 업데이트를 막을 수 있다.
예를 들어, 특정 prop이 특정 값을 가지고 있지 않은 경우 등...
이렇게 함으로써 불필요한 리렌더링을 방지하고 성능을 향상시킬 수 있다.
예시
기본적인 형태
shouldComponentUpdate(nextProps, nextState) {
// 새로운 props 또는 state와 현재 props와 state를 비교하여
// 업데이트 여부를 결정하는 로직을 작성한다.
// 이 메서드는 boolean 값을 반환해야 한다.
// true를 반환하면 업데이트를 수행하고, false를 반환하면 업데이트를 건너뛴다.
}예시
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// count가 짝수일 때만 리렌더링되도록 설정
shouldComponentUpdate(nextProps, nextState) {
// nextState.count가 짝수일 때만 업데이트를 허용
if (nextState.count % 2 === 0) {
return true; // 업데이트 허용
}
return false; // 업데이트 거부
}
// 버튼을 클릭할 때마다 count를 증가시킴
handleClick = () => {
this.setState(prevState => ({
count: prevState.count + 1
}));
}
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.handleClick}>Increment Count</button>
</div>
);
}
}
export default MyComponent;shouldComponentUpdate 메서드에서 count가 짝수일 때만 업데이트를 허용한다.
