javascript react : component LifeCycle API

설명 : https://velopert.com/1130  

* Mounting

-constructor 생성자 함수: 

우리가 만든 컴포넌트가 처음 브라우저 상에 나타나게 될때 만들어지는 과정에서 먼저 실행되는 함수

 컴포넌트가 가지고 있을 state를 초기설정하거나 컴포넌트가 만들어지는 과정에서 미리해야할 작업들이 있다면 constructor에 처리

-getDriveStateFromProps:

프롭스로 받은 값을 스테이트에 동결 시키고 싶은 경우에 사용

-render:

돔을만들때,, 내부태그에 어떤값을 줄지

-componentDidMount

외부라이브러리, 디스이 차티스트라든지 차트 라이브러리 사용할때  특정 돔에다 차트를 그려주세요 할때 씀

네트워크 요청 ajx 요청할때도 쓰임

컴포넌트가 나타난 다음에....무엇을 하고 싶다.... 스크롤 이벤트를 읽고 싶다할때 사용

컴포넌트가 실행할 쯤에 무엇을 하겠다 할때 사용함

* Updating

-getDeriveStateFromProps: 위에 반복설명,,,, props를 state에 동결시킬때

-shouldComopnentUpdate:(중요)

컴포넌트가 업데이트 되는 성능을 최적화시킬때 사용

주로 어떨때 사용하면 

리액트의 기본 원리로 돌아가보자면,,,,,보통 업데이트해서 리렌더링할때, 실제 돔상에서는 부분만 바뀌지만,,,, 버추어 돔에서는 전부 한번 그리게 된다....

즉 새롭게 완전히 버추어 돔과 현재와 비교해봐서.... 실제 돔에서는 그 부분만 바뀌는 것이다....그런데 어찌 되었든간에,,, 버추어 돔은 완전히 새롭게 그려야한다..

그런데 이 완전히 새롭게 그려야하는 버추어돔 조차도 성능을 아끼고 싶을때.... 이 함수를 사용한다..(컴포넌트가 몇천개 몇백개 된다면 공감될것이다...)

true false 값을 반환할수 있다,,, true 값을 반환하면 rendering 프로세스를 거치는거고,,, false 값을 반환하면 여기서 멈춰버린다..

즉 벌추얼 돔에 렌더링할지 말지 결정하는 함수이다..

-getSnapshotBeforeUpdate

우리가 rendering한다음에,,브라우저상에 바로 반영되기 직전에 호출되는 함수

rendering을 하고 나서 업데이트 바로 하기전에 스크롤의 위치 해당 돔의 크기를 사전에 가져오고 싶다.할때 사용

(다시 말해,,변화를 주어도,,, 스크롤 위치를 그대로 유지 한다는 말이다... 

그리고 추가로 말하자면,,, 크롬은 이런기능이 없어도 저절로 브라우저에서 제공하는 경우가 있다..)

-componentDidUpdate

이것을 이 작업을 마치고 컴포넌트가 업데이트 되었을때 호출된 함수

state가 바뀌었을때 이전의 상태와 지금의 상태가 페이지가 바뀌었을때..

(this.state와 preps.state 특정 페이지랑 다르다... 그럼 여기서 어떤 작업을 하겠다.. 등)

*Unmounting

-componentWillUnmount:

컴포넌트가 사라지는 과정에서 호출되는 함수

componentDidMount에서 한 이벤트리스너를 없앤다던가 등을 한다...

기타:

componentwillmount는 사라졌다

참고:

https://react-anyone.vlpt.us/05.html