이전 포스트와 연결되는 내용입니다.
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 변수가 변경될 때 화면을 다시 그리며 제어할 수 있겠죠 ?
콘솔창을 열어보면 .. !
render 가 한번 더 실행된 것을 볼 수 있습니다.
오늘도 즐공 !!
'리액트' 카테고리의 다른 글
| 리액트 var , let , const 사용하기 (0) | 2023.01.28 |
|---|---|
| 리액트 - 템플릿 문자열 사용하기 (0) | 2023.01.25 |
| 리액트 생명주기 함수 다이어그램 (0) | 2023.01.24 |
| 리액트 생명주기 함수 componentDidMount() 사용하기 (0) | 2023.01.24 |
| 리액트 생명주기 함수 static getDerivedStateFromProps(props, state) 사용하기 (0) | 2023.01.24 |
이전 포스트와 연결되는 내용입니다.
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 변수가 변경될 때 화면을 다시 그리며 제어할 수 있겠죠 ?
콘솔창을 열어보면 .. !
render 가 한번 더 실행된 것을 볼 수 있습니다.
오늘도 즐공 !!
'리액트' 카테고리의 다른 글
| 리액트 var , let , const 사용하기 (0) | 2023.01.28 |
|---|---|
| 리액트 - 템플릿 문자열 사용하기 (0) | 2023.01.25 |
| 리액트 생명주기 함수 다이어그램 (0) | 2023.01.24 |
| 리액트 생명주기 함수 componentDidMount() 사용하기 (0) | 2023.01.24 |
| 리액트 생명주기 함수 static getDerivedStateFromProps(props, state) 사용하기 (0) | 2023.01.24 |
