리액트 생명주기함수 shouldComponentUpdate() 사용하기

이전 포스트와 연결되는 내용입니다. 

 

shouldComponentUpdate() 함수는 component의 변경 과정에 속합니다. 

변경이란 props 나 state의 변경을 말합니다.

 

App.js

LifeclycleEx008.js

componentDidMount() 함수는 '생성'단계의 생명주기 함수 중 가장 마지막으로 실행됩니다. 

tmp_state2 라는 state변수에 true 라는 boolean 유형의 데이터를 세팅해주었습니다. 

setState() 함수는 변수의 선언과 초기화를 동시에 실행합니다. 

 

this.setState({tmp_state2: true}) 에서 state의 변경이 발생했기 때문에 ' 변경 ' 단계의 생명주기 함수 shouldComponentUpdate() 가 실행됩니다. 

 

shouldComponentUpdate()는 boolean 유형의 데이터를 반환하는데,

return 값이 true 일 경우 render() 함수를 한번 더 호출합니다. 

 

따라서 shouldComponentUpdate() 함수의 반환 값에 따라 render() 함수를 재실행할 수 있다는 점을 이용하면, 
props 나 state 변수가 변경될 때 화면을 다시 그리며 제어할 수 있겠죠 ? 

 

콘솔창을 열어보면 .. ! 

shouldComponentUpdate의 반환값이 true이므로 render() 가 한번 더 실행되었다.

 

render 가 한번 더 실행된 것을 볼 수 있습니다. 

 

오늘도 즐공 !!