React PureComponent를 알아보자!

 

📌 클래스 컴포넌트 정의

React의 클래스 컴포넌트 정의 방법은 2가지가 있다. 하나는 React.Component 다른 하나는 React.PureComponent

이 두 가지의 방식의 차이점은 shouldComponentUpdate() 라이프사이클을 다루는 방식이 다르다는 점이다.

 

class Han extends React.Component {
  render() {
    return <h1>React.Component</h1>;
  }
}

class Woo extends React.PureComponent {
  render() {
    return <h1>React.PureComponent</h1>;
  }
}

 

React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있는데, props와 state를 얕은 비교를 통해 비교한 뒤 변경된 것이 있을 때만 리렌더링한다. PureComponent를 사용해 shouldComponentUpdate() 메서드 사용을 고려하지 않으면서 React 애플리케이션 성능을 향상시킬 수 있다. 다만 주의할 점은 props와 state의 데이터 구조가 복잡할 경우, 깊은 자료 구조의 차이가 존재함에도 불구하고 차이가 없다고 판단하는 잘못된 결과를 만들어낼 수 있다.

 

 

📌 코드 예시

state와 props 데이터 변경으로 인한 리렌더링 예시를 보여주기 위해 FirstChild와 SecondChild 컴포넌트 안에 input을 구현하였다.

 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstValue: "123",
      secondValue: "456"
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    const { value, name } = e.target;
    this.setState({ ...this.state, [name]: value });
  }

  render() {
    const { firstValue, secondValue } = this.state;
    console.log("re-render?");
    return (
      <div className="App">
        <FirstChild value={firstValue} onChangeValue={this.onChange}>
          firstInput
        </FirstChild>
        <SecondChild value={secondValue} onChangeValue={this.onChange}>
          secondInput
        </SecondChild>
      </div>
    );
  }
}

export default App;

📌 React.PureComponent 미사용

아래의 영상은 React.Component로 정의한 컴포넌트이다. console.log를 자세히 보면 SecondChild 컴포넌트의 Input값을 변경하지 않아도 FirstChild 컴포넌트의 Input 값을 변경할 때마다 리렌더링이 발생한다. 리액트가 실행될 때 가장 많은 CPU 자원을 사용하는 것은 렌더링이기 때문에 리렌더링이 자주 발생하는 것은 프로그램 성능에 많은 영향을 미쳐 성능 하락을 야기하므로 렌더링 최적화가 중요하다.

 

 

📌 React.PureComponent 사용

1) FirstChild 컴포넌트만 PureComponent 사용

 

FirstChild 컴포넌트의 Input 값을 변경할 때 마다 FirstChild, SecondChild 동시에 리렌더링이 발생한다. 하지만 SecondChild의 input 값을 변경하면 FirstChild 컴포넌트는 상태값 변경이 발생하지 않았기 때문에 리렌더링 되지 않는다.

 

 

 

2) FirstChild, SecondChild 모두 PureComponent 사용

 

자식 모두 PureComponent로 선언 하니, 서로의 상태값 변경으로 인한 영향을 받지 않았다. PureComponent를 사용했기 때문에 이전 상태값과 현재 상태값을 비교한 후 변경된 사항이 발생하지 않으면 리렌더링 하지 않는다.