React 생활코딩 - 19. shouldComponentUpdate

18에서 본 push 와 concat

왜 우린 push 가 아닌 concat을 사용해야 할까??

 

지금 이 애플리케이션은 좀 불리한 면을 갖고있다.

 

<TOC> 는 글 목록을 보여준다.

그리고 이TOC는 contents의 배열을 보여준다. 배열이 바뀌면 당연히 TOC component 의 render 매소드가 호출되는걸 통해서 TOC가 다시 그려진다.

 

그렇다면 contents 가 바뀌지 않았다면? TOC의 render 를 호출하는 건 좋지 않다.

 

작은 프로그램에서는 아무 문제가 없지만 소프트웨어의 규모가 커지다보면 이러한 issue들이 부상하게 된다

 

그래서 성능을 향상시키고 싶을땐, 어떤 componenet의 render함수가 실행될지 실행되지 않을지 코드를 작성하는 개발자가 결정할 수 있도록 특수한 약속의 함수를 제공한다

 

바로 이 함수
shouldComponentUpdate

 

 

리펙토링, 튜닝이 필요하다.

 

TOC.js

shouldComponentUpdate 함수를 사용해서 return 값이 true일 경우 render 함수까지 호출하지만,

false일 경우 render 함수는 호출 되지 않는다

 

Create의 form을 사용해 id 값을 넣어줘도 return 값이 false이기 때문에 새로운 값은 화면에 보이지 않는다.

 

이때 shouldComponentUpdate에 새로운 newProps.data 와 이전의  this.props.data 를 콘솔에 찍어서 비교할 수 있다.

 

 

이를 통해 첫번째 인자를 통해 바뀐 값을 알고 있고, 두번째 인자를 통해 예전 값을 알 수가 있다.

 

종합해서 본다면,

 

1. render이전의  shouldComponentUpdate 가 실행된다

2. shouldComponentUpdate의 return 값이 true일 경우 render가 호출되고 false면 render는 호출되지 않도록 약속되어있다.

3. shouldComponentUpdate (newProps, newState) 새롭게 바뀐 props 값 => newProps 과 이전값=> this.props.data에 접근할 수 있다

 

그렇다면 이 프로그램에서

TOC 로 들어오는 data={this.state.contents} App.js 라는 props의 값이 바뀌었을때 render가 호출되고 바뀌지 않았을때 render가 호출되지 않게 해주면 좋다.

 

 

조건문을 사용한다.

TOC 영역을 클릭하면 shouldComponentUpdate 함수는 호출되지만 render는 호출되지 않는다 false

그러나 Create를 클릭해 새로운 contents를 만들면 shouldComponentUpdate 는 true로 render 함수가 호출된다.

즉 this.props.data 와 newProps.data는 같지 않기 때문이다.

 

 

여기서 App.js 에서 push 방식으로 구현한다면 contents의 원본을 바꿔버린다.

그리고 실행하면 Create로 새로운 contents를 넣어줘도 this.props.data 이전의 값과 newProps.data 새로운 값 이 완전히 일치하게된다. 

그렇다면 TOC에서 shouldComponentUpdate 는 true로 render을 실행시켜주지 않는다. 

즉 화면이 바뀌지 않는다.

 

이러한 이유로 push 가 아닌 concat의 방법을 사용하는 것이다.