[React] 클래스형 컴포넌트 - Component, PureComponent / shallow-equal

 

 

 

---

 

 

 

 

◽ Class형 컴포넌트

Class형 컴포넌트에는 Component외 PureComponent가 있다.

 

 

◽ 차이점

두 컴포넌트 모두 props와 state의 변경에 따라 render() 함수를 호출하는데, 변경에 대한 기준이 다르다.

 

1. Component

비교 대상이 완전히 동일하지 않으면 변경이 발생했다고 본다.

setState() 함수로 실행된 값은 이전에 있던 state 변수값과 동일하더라도 컴포넌트에서는 새로운 state 변수가 같은 이름으로 생성됐다고 인식한다.

// 1. Component를 import한다.
import React, { Component } from "react";

// 2. 상속받는다.
class ChildComp extends Component {
	// 코드 ...
}

 

2. PureComponent

비교 대상의 값을 비교해 동일하지 않으면 변경이 발생했다고 본다.

setState() 함수를 실행하여 새로운 state 변수를 선언하더라도 변수값을 비교하여 동일하다면 변경됐다고 간주하지 않는다.

예외적으로 객체에 대해서는 *참조값을 비교한다.

* 참조값: 객체를 생성했을 때 저장되는 메모리 주소로 완전히 동일한 객체라도 새로 선언하면 다른 참조값을 갖게된다.

 

불필요한 rendor() 함수의 실행을 줄이면 페이지 성능을 향상시킬 수 있다.

// 1. PureComponent를 import한다.
import React, { PureComponent } from "react";

// 2. 상속받는다.
class ChildComp extends PureComponent {
	// 코드 ...
}

 

 

 

---

 

 

 

◽ shallow-equal 패키지

shallow-equal 패키지는 PureComponent에서 state 값의 변경을 비교하는 것과 동일한 기능을 하는 함수이다.

shallowEqualArrays() 함수를 사용하면 문자열과 배열은 값만 비교한다. (객체는 참조 값을 비교)

 

 

◽ 설치하기

npm install shallow-equal --save

 

 

◽ 사용하기

예제 1. shallowEqualArrays(obj1, obj2...)

componentDidMount() {
  const object = { react: 'after LIKE' }
  const Array1 = [ '리액트', object ]
  const Array2 = [ '리액트', object ]
  const Array3 = [ '리액트', { react: 'after LIKE' } ]

  console.log(shallowEqualArrays(Array1, Array2)); // true: 같은 참조값이기 떄문
  console.log(shallowEqualArrays(Array2, Array3)); // false: 다른 참조값이기 때문
}

 

예제 2. shallowEqualArrays로 변경여부 감지하기

import React, { Component } from "react";
import { shallowEqualArrays } from "shallow-equal";

class ChildComp extends Component {
  constructor(props) {
    super(props);
    this.state = { stateString: 'After LIKE' }
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 해당 함수로 값만 비교하기때문에 false를 반환하고 render()가 실행되지 않는다.
    return !shallowEqualArrays(this.state, nextState)
  }

  componentDidMount() {
    this.setState({ stateString: 'After LIKE' })
  }

  render() {
    return console.log('in render()');
  }
}

export default ChildComp

 

 

 

---

 

출처

이정열, 초보자를 위한 리액트 200제 (정보문화사, 2021)