React공부-shouldComponentUpdate

1. render함수는 특정 컴포넌트에서 사용하는 state만 바꼇는데도 모든 컴포넌트가 render된다. 이러한 문제는 큰 프로그램에서 큰 이슈로 된다.

2. 문제 해결법 shouldcomponentUpdate
   
   shouldComponentUpdate값을 return true로 하면
   shouldComponentupdate함수 호출 후 render함수가 호출된다.

만약 return false로 하면

shouldComponentupdate함수는 호출되지만 render함수는 호출되지 않는다.

3. shouldComponentUpdate는 2가지 매개변수를 가질 수 있다.
   
   newProps Props가 바꼈을 때 바뀐 props값
   state가 바겼을 때 바뀐 state값이 들어온다.
   

create하지 않았을 때 newProps.data와 this.props.data를 비교해보자 서로 같은 것을 알 수 있다.

create하였을 때 newProps.data는 4개이지만 this.props.data는 3개인 것을 알 수 있다. 즉 변경되었는지 확인 할 수 있다.

정리
1. render이전에 shouldComponentUpdate가 실행된다.
2. shouldComponentUpdate가 true면 render가 호출되고 false면 render가 호출되지 않도록 되어 있다.
3. shouldComponentUpdate는 새롭게 바뀐 값과 이전 값에 접근 할 수 있다.
4. 즉 바뀐 여부를 확인해서 render할지를 결정할 수 있다.

즉 이전값과 바뀐값이 같은지 체크해서 render할지 결정한다.

이제 원본을 수정해서 바뀐값을 set하면 ShouldComponentUpdate가 정상적으로 작동하지 않는다. 왜냐하면 원본을 수정했기 때문이다.

concat말고도 다른 방법이 있다.
Array.from하여 새로운 배열을 만드는 방법이다.

Array.from은 배열을 복사할 때 쓰는 방법이고 객체는 다른 방법을 사용한다.
Object.assign을 사용한다.