[ReactJS] 리액트 200제 _ ex006 ~ 008 (생명주기 함수)

06

getDerivedStateFromProps(props, state)

• 컴퍼넌트가 새로운 props를 받게 되었을 때 state를 변경해줌
• constructor( ) 함수 다음으로 실행된다
• App.js에서 전달한 prop_value라는 변수를 props.prop_value로 접근해 값 가져옴

• 보다시피 constructor > getDerived > render 순으로 실행되었다.

 

07

componentDidMount( )

• 생명주기 함수들 중에서 가장 마지막에 실행됨
• render( ) 함수가 코드를 화면에 그려준 후 실행됨
• 화면 그려지는 것이 끝난 후의 이벤트 처리, 초기화 등 가장 많이 활용되는 함수임

 

 

08

shouldComponentUpdate()

• 생명주기 과정 중 component의 변경(props, state) 과정에 속하는 함수임
• state 변경이 일어나면 실행됨
  • boolean 유형의 데이터를 반환함
    • return 값이 true면 render( ) 함수를 한 번 더 호출함
• setState( ) 함수는 변수의 선언과 초기화를 동시에 실행함