class형 컴포넌트 - pureComponent

PureComponent
shouldComponentUpdate를 구현해 놓은 컴포넌트다.

 

  pureComponent의 첫 번째 기능은 state의 변경이 있는 경우에 자동으로 true, false를 계산하여 반환한다. 이를 통해 state의 변화가 있는 경우에만 리렌더링 되도록 최적화 할 수 있다. 다음 코드를 살펴보자.

import React, { Component } from "react";

class Test extends Component {
  state = {
    counter: 0,
  };

  onClick = () => {
    this.setState({});
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

export default Test;

 

  PureComponent가 아닌 Component로 클래스를 확장하여 컴포넌트를 만드는 경우, React.Component는 shouldComponentUpdate를 따로 설정해주지 않은 경우, 항상 true를 반환한다. 즉, setState가 실행되면 state, props의 변경 여부를 신경쓰지 않고 무조건적으로 컴포넌트를 업데이트시킨다는 것이다. 그러므로 불피요한 리렌더링이 일어나게 된다. 이를 해결하는 방법으로 shouldComponentUpdate()를 통해 직접 설정해주는 방법도 있지만 Component 대신 PureComponent로 클래스를 확장하는 방법이 있다. 리렌더링이 되기 전 기존 state와 바뀔 state의 변경을 확인하여 변경이 있는 경우에만 렌더링되게 한다. 다시 PureComponent로 클래스를 확장해 보자.

 

import React, { PureComponent } from "react";

class Test extends PureComponent {
  state = {
    counter: 0,
  };

  onClick = () => {
    this.setState({});
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

export default Test;

 

⚠️주의사항

PureComponent로 클래스를 확장한 경우에 예상하지 못한 문제가 발생할 수 있다. state의 변경을 확인할 때 참조 전달이 되는 자료구조의 경우 문제가 발생할 수 있다. 다음 코드를 살펴보자.

 

import React, { PureComponent } from "react";

class Test extends PureComponent {
  state = {
    counter: 0,
    array: [],
  };

  onClick = () => {
    const array2 = this.state.array;
    array2.push(1);
    console.log(this.state);
    
    this.setState({
      array: array2,
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

export default Test;

 

  버튼 클릭하면 array2에는 숫자 값 1을 push하게 되고 setState를 통해 array의 값을 array2로 변경하게 된다. 그렇다면 state의 정보가 바뀌게 된 것 아닌가?? 다음 영상을 살펴보자! 

 

 

 

  state의 변경이 있음에도 불구하고 리렌더링 되고 있지 않은 것을 알 수 있다. (리렌더링 되는 경우 highlight처리를 통해 화면에 보여지게 되는 리액트 개발 도구의 옵션이 있다) 이런 경우에는 상태가 변경되었음에도 상태가 변경 된 것을 PureComponent는 인지하지 못하고 리렌더링 되지 않는 문제가 발생하게 된다. 이러한 문제를 해결하기 위해서는 참조 전달의 경우에는 전개연산자와 같은 얕은 복사를 통해 기존 데이터와 변경될 데이터를 묶어 하나의 데이터로 다시 만들어 값을 갱신해주어야 PureComponent가 state 변경을 알 수 있다.

 

import React, { PureComponent } from "react";

class Test extends PureComponent {

  state = {
    counter: 0,
    array: [],
  };


  onClick = () => {
    const array2 = this.state.array;
    array2.push(1);
    console.log(this.state);
    this.setState({
      array: [...this.state.array, array2],
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

export default Test;

 

 

얕은 복사를 통해서 array의 값을 갱신해주면 state의 변경을 감지하고 렌더링되는 것을 확인할 수 있다.

 

 

 

 

 

  pureComponent의 두 번째 기능은 props의 변화를 감지하여 리렌더링 되게 만들어 주는 기능이 있다. 한 가지 주의해야 할 점은 pureComponent는 class형 컴포넌트에만 적용이 가능한데 함수형 컴포넌트에도 이와 같은 기능을 해주는 것이 있는데 그것이 바로 React.memo이다. 다음 코드를 살펴보자. (이번에는 함수형 컴포넌트를 기준으로 정리해보겠다)

 

 

//자식 컴포넌트
import React from "react";

const Try = (props) => {
  return (
    <li>
      <div>{props.value.try}</div>
      <div>{props.value.result}</div>
    </li>
  );
};
Try.displayName = "Try";
//단, memo를하게 되면 컴포넌트의 이름이 변경되기 때문에 컴포넌트의 이름을 제대로 변경시켜주어야 한다.
export default Try;

 

  부모 컴포넌트의 코드가 길어 부모 컴포넌트의 코드는 생략하도록 하겠다! 위의 코드를 보면 부모 컴포넌트로부터 데이터를 넘겨 받아 부모 컴포넌트가 자식 컴포넌트를 활용하게 된다. 그런데 div태그 내에 있는 데이터는 계속 고정된 값임에도 불구하고 부모 컴포넌트가 리렌더링 되면 Try 자식 컴포넌트도 다시 리렌더링되게 된다. 이는 매우 비효율적이다.(영상에서는 li의 props 변경이 없음에도 계속 리렌더링 된다.) 다음 영상을 통해 확인해 보자.

 

 

 

  이러한 비효율적인 리렌더링을 막기위해 props가 변경한 경우에만 리렌더링 되도록 고차 컴포넌트인 React.memo를 활용할 수 있다.메모로 래핑 될 때, React는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징된 내용을 재사용한다. 다시 적용해 보자. 

 

☑️ 고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다.

 

//자식 컴포넌트
import React, {memo} from "react";

const Try = memo((props) => {
  return (
    <li>
      <div>{props.value.try}</div>
      <div>{props.value.result}</div>
    </li>
  );
});

Try.displayName = "Try";
//단, memo를하게 되면 컴포넌트의 이름이 변경되기 때문에 컴포넌트의 이름을 제대로 변경시켜주어야 한다.
export default Try;

 

 

 

 

  이 처럼 불필요한 리렌더링을 막아주는 기능들에 대해서 살펴보았다! 정리해 보자면 React.Component로 class를 확장한 경우 데이터의 변경이 있는 경우에만 리렌더링 되도록 해줄 필요가 있을때는 shouldComponentUpdate( )를 함께 사용하고, 간단하게는 React.PureComponent를 활용할 수 있고 함수형 컴포넌트인 경우에는 props의 변경이 있는 경우에만 리렌더링 되도록하는 React.memo기능이 있다. 이를 통해 보다 최적화를 용이하게 할 수 있을 것이다!