Pure Component란 무엇인가?
결론부터 말하자면 Pure Component는 리액트 최적화를 위해 사용된다.
클래스형 컴포넌트에서 사용되며 Hooks 방식에서는 React.memo를 사용한다.
import React, {Component} from 'react';
class Example extends Component {
state = {
counter: 0;
}
onClick =() => {
this.setState({})
}
render () {
console.log("렌더링", this.state);
return (
<>
<button onClick={this.onClick}>클릭</button>
</>
)
}
}위와 같은 예시를 보면 setState가 존재하지만 state를 변경하고자 하는 내용이 없다. state가 변경되었을 때, 리랜더링이 일어나기 때문에 위의 예시는 리랜더링이 발생하지 않을 것 처럼 보인다.
하지만, 실행해보면 클릭을 할 때마다 리랜더링이 발생하게 된다. 이처럼 불필요한 랜더링이 계속 발생하면 성능 저하에 문제가 발생하게 될 것이다.
그래서, 클래스형 컨포넌트는 생명주기 메서드를 활용하여 불필요한 리랜더링을 방지할 수 있다.
shouldComponentUpdate()
[예시]
shouldComponentUpdate(nextProps, nextState, nextContext) {
if( this.state.counter !== nextState.counter){
return true;
}
return false;
}위의 예시처럼 현재 state와 다음 state가 다를 경우 (state가 바뀐 경우)에 true를 리턴하여 리랜더링 시켜준다.
위와 같은 shouldComponentUpdate()를 사용하지 않아도 PureComponent를 사용하면 쉽게 구현이 가능하다.
PureComponent 사용 방법
import React, { PureComponent } from 'react';
class Example extends PureComponent {
...
}클래스형 컨포넌트에서 Component를 PureComponent로 바꿔주기만 하면 된다.
PureComponent 단점
PureComponet는 사용방법도 간단하여 활용하기 편하지만 단점도 존재한다.
객체나 배열과 같은 참조 관계를 갖는 복잡한 구조에서 state 변경을 제대로 인식을 못할 수도 있다. 배열에 변경이 있을 경우에는 이전 배열을 그대로 가져다 쓰기보다는 배열을 분해하고 새 배열을 만들어서 변경되었음을 알려주는 것이 좋다.
(참고: https://velog.io/@gabdol/React-%EB%B0%B0%EC%97%B4-Push%EC%9D%98-%EB%AC%B8%EC%A0%9C%EC%A0%90)
또한, shouldComponentUpdate()를 사용하면 자신이 원하는대로 커스터마이징하여 상황에 따라 랜더링 여부를 결정할 수 있다는 장점이 있다.
따라서, 무조건 PureComponent를 사용하기 보다는 상황에 따라 맞는 방법을 이용하여 쓰는 것이 좋다.
출처:
