[React] 리액트 라이프 사이클 (Life cycle in react.js)

안녕하세요 정말 중요한 부분인거 같아서 메인 포스팅 전의 서브 포스팅을 합니다.

React.js 에서의 라이프 사이클 에 대한 이야기인데요

**** 해당 라이프 사이클에 대한 내용은 현재 보고있는

" 리액트를 다루는 기술 " 책을 9할 이상 공홈에 1할정도 참고 하였습니다.

리액트 입문을 이책으로 하고 있는데 설명이 너무 좋습니다.

1. 마운트 

react 공식 홈 에서는  DOM 에 처음으로 렌더링 될때 라고 되어있습니다.

DOM이 생성되고 웹 브라우저상에 나타나는 작업입니다.  마운트 됐을때의 라이프 사이클

> 컴포넌트 생성

> constructor

-    컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자

> getDerivedStateFromProps (update 사이클에서도 있는 메서드입니다.)

-    props에 있는 값을 state에 동기화하는 메서드

(16.3 새로운 메서드)

static getDerivedStateFromProps(nextProps,prevState){

if(nextProps.value != preState.value){

return { value : nextProps.value };

}

return null; // state 변경 이 필요 없을 시

}

> render

-    생성된 Component UI 를 렌더링 하는 메서드

> componentDidMount

-    컴포넌트가 웹 브라우저상에 나타나는 후에 호출되는 메서드  (마운트가 끝났을 때 겠네요)

 

2. 언마운트

DOM 에 생성되어있는 컴포터를 제거하는 과정

>    componentWIllUnmount

-    컴포넌트가 브라우저(DOM)에서 사라지기 직전에 호출

3. 업데이트 

*****업데이트 는 매우 중요할 것으로 보입니다.

업데이트가 되는 경우 

- props변경 시

- state 변경 시

- 부모 컴포넌트가 리렌더링시 

- this.forceUpdate() 로 강제 렌더링 트리거 시 

[ 참조 - 리액트 를 다루는 기술 ] 

3-1 getDerivedStateFromProps (마운트에도 있던 메서드)

마운트 과정에서도 호출되며 props가 바뀌여서 업데이트시에도 호출이 되는 메서드

3-2 shouldComponentUpdate - 메서드 명 대로 해야할지 말아야할지 를 결정합니다.

컴포넌트가 리렌더링을 할지 말지 결정하는 메서드 return 이 false인 경우는 이 다음에 나오는 메서드를 호출하지않습니다.

3-3 render 

컴포넌트를 리렌더링 합니다.

3-4 getSnapshotBeforeUpdate

컴포넌트 변화를 DOM 에 반영하기 바로 직전에 호출하는 메서드 (DOM 에 적용된게 아닙니다.) 

(16.3 새로운 메서드) - 리액트 공식홈

getSnapshotBeforeUpdate(prevProps, prevState) {

// Are we adding new items to the list?

// Capture the scroll position so we can adjust scroll later.

if (prevProps.list.length < this.props.list.length) {

const list = this.listRef.current;

return list.scrollHeight - list.scrollTop;

}

return null;

}

3-5 componentDidUpdate

컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드 

대충 10건 정도의 메서드들이 있네요