shouldComponentUpdate를 통한 최적화, 불변성을 왜 유지하는가?

이번에는 state값을 업데이트 할 때 왜 불변성을 유지하는지 그리고 컴포넌트 업데이트를 하게 될 때 성능최적화는 어떻게 하게 되는지 알아보자.

 

App.js에 information 값에 기본값을 넣어주도록 하자. 컴포넌트 업데이트 최적화 작업을 할 때 할때마다 등록하는 거 보다 사전에 무엇이 있는게 작업할 때 편하다. 기본값을 넣어주었고 아래와 같이 나오게 된다. id값은 다음 들어갈 값이 id가 3이니까 id=3으로 넣어준다.

class App extends Component {

  id = 3;

  state = {
    information: [
      {
        id: 0,
        name: '홍길동',
        phone: '010-0000-0001'
      },
      {
        id: 1,
        name: '김민준',
        phone: '010-0000-0002'
      },
      {
        id: 2,
        name: '김벨로퍼트',
        phone: '010-0000-0003'
      }
    ],
    keyword: '',
  }

PhoneInfo 쪽에가서 console.log(name)을 해본다.

그리고 PhoneInfoList쪽에서 console.log('rendering list')를 해준다. 그리고 console을 보면 rendering list라고 나타나고 기본값 이름이 순서대로 나타난다. 

새로운 데이터를 추가하게 될 때 기본값 이름들은 영향을(홍길동 김민준 김벨로퍼트) 받을 필요가 없다.

하지만 업데이를 하게 될 때 app 컴포넌트에서 render가 발생하고 PhoneInfoList에서 render가 발생하면 내부에 있는 컴포넌트들도 한번 더 render가 되도록 설계가 되어있다.

그래서 shouldComponentUpdate를 통해서 update가 불필요할 때는 update를 하지않도록 해줘야 한다.

 

성능최적화는 PhoneInfo에서 shouldComponentUpdate를 구현하면 되는데 react-code snippet을 설치했다는 가정하에

scu를 입력해서 아래와 같이 나타나게 해준다.

shouldComponentUpdate(nextProps, nextState) {
        
    }

 

만약에 shouldComponent를 업데이트 하지 않았더라면 기본적으로는 return true라고 작동한다. 즉 부모컴포넌트가 업데이트 되던 props가 업데이트 되던 state가 업데이트 되던 언제나 render함수가 호출되는 것이다. 

shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

일단 state가 바뀔 때마다 업데이트를 해줄 것인데 this.state와 nextState가 다르다면 return true를 처리하게 하고 그 외에 조건인 props 받아온 info 값이 nextProps.info값과 달라졌을 때만 true라고 해준다.

만약 state값도 같고 info값도 같으면 render함수를 다시 호출하지 않는 것이다. 아래와 같이 홍길동을 삭제해도 다른 이름들은 랜더링 되지 않는다. 새로운걸 추가해줬을 때도 마찬가지이다.

// PhoneInfo.js

shouldComponentUpdate(nextProps, nextState) {
    if (this.state !== nextState) {
      return true;
    }
    return this.props.info !== nextProps.info;
  }

 

이전에 shouldComponentUpdate에서 업데이트를 해야할 지 말아야 할지 로직을 구현할 때 현재의 props와 다음 받아올 props 값을 비교해서 다를 때 업데이트를 하도록 작업을 했었다. 

 

아래와 같이 콘솔창에서 작성한 결과를 참고해서 나중에 shouldComponentUpdate에서 로직을 구현할 때 굉장히 복잡해질 것을 예상할 수 있다. 단순히 객체가 다른지 확인하기 위해서 내부에 있는것 까지 하나하나 확인해야 하는 상황에 처하게 되는 것이다.

const array = [0, 1, 2];
undefined

const anotherArray = array;
undefined

array.push(3);
4

anotherArray
(4) [0, 1, 2, 3]

array
(4) [0, 1, 2, 3]

array === anotherArray
true

const object = { a: 1, b: 2};
undefined

const anotherObject = object
undefined

object.c = 3;
3

anotherObject
{a: 1, b: 2, c: 3}

object === anotherObject
true

 

만약에 불변성을 유지한다면 아래코드를 보자. 

const array = [0, 1, 2];
undefined

const anotherArray = [...array, 3];
undefined

const anotherArray2 = array.concat(4);
undefined

array
(3) [0, 1, 2]

anotherArray
(4) [0, 1, 2, 3]

anotherArray2
(4) [0, 1, 2, 4]

array !== anotherArray
true

array === anotherArray2
false

 

 

객체일 때도 마찬가지이다. shouldComponentUpdate를 할 때 불변성을 유지하지 않으면 굉장히 복잡해진다.

그래서 리액트에서 객체나 배열값을 수정하게 될 때 불변성을 꼭 유지해야 한다.

 

만약 spread operator를 사용한다던지 객체 내부적으로 깊은객체같은 것을 불변성을 유지하면서 내부의 값을 바꾸려면 굉장히 귀찮다.

이러한 작업을 할 때 또는 어떤 객체가 있고 안에 다른 객체가 있고 그 안에는 어떤 배열이 있고 하는 상황도 있을 수 있다.

이럴때 ...object를 사용해 작업하면 복잡할 수도 있다. 그럴 때 사용하는 관련 라이브러리를 나중에 알아보자.

const object = { a: 1, b: 2 };
undefined

const anotherObject = { ...object, c: 3};
undefined

object !== anotherObject;
true

anotherObject
{a: 1, b: 2, c: 3}

object
{a: 1, b: 2}

const nestedObject = {
    a: {
        b: {
            c: {
                d: {
                }
            }
        }
    }
}
undefined



const nestedObject2 = {
    a: {
        b: []
    }
};

r

 

 

 

 

 

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의

https://immutable-js.com/

Immutable.js

https://github.com/immerjs/immer

GitHub - immerjs/immer: Create the next immutable state by mutating the current one