Component Life Cycle

> Diagram

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

> learning page

https://www.w3schools.com/react/react_lifecycle.asp

React Lifecycle

 

 

생명주기 함수는 Render() 함수를 포함하여 총 8종의 함수가 있다. 이는 리액트 엔진에서 자동으로 호출하는데 위의 그림은 컴포넌트의 생명주기를 그래프로 나타낸 것이다.

 

컴포넌트 생성부터 생성완료까지 4개의 생명주기 함수가 호줄 되는데 이 과정을 생성 과정이라 부른다.

이후 5개의 생명주기 함수가 호출된다. 이 과정을 갱신 과정이라고 부른다.

 

constructor() -> 보통 내부에 super()함수를 호출한다. super 함수 내부에는 프로퍼티와 생명 주기 상태 등을 초기화 해주는 등의 중요한 과정이 담겨있다.

 

render() -> 데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호출되는 함수.

 

static getDerivedStateFromProps(pops, state) -> 정적함수로, this.props 등에 접근할 수 없기에 인자로 전달된 값을 이용해야 한다.

이때 porps는 상위 컴포넌트에서 전달된 값이며, state는 현재 컴포넌트의 state값.

해당 함수는 상위 컴포넌트에서 전달받은 프로퍼티로 state 값을 연동할 때 주로 사용되며, 반환 값으로 state함수를 변경한다.

 

ComponentDidMount() -> render()함수가 끝난 후 호출되는 함수, 화면이 표현된 후의 필요한 작업들을 기술하는 곳

 

shouldComponentUpdate(nextProps, nextState) -> property를 변경하거나 setState() 함수를 호출하여 state값을 변경하면 '화면을 새로 출력해야 하는지' 판단하는 함수.

해당 함수는 재출력을 판단하며, 데이터 변화를 비교하는 작업을 포함하므로 성능에 영향을 많이 끼친다. 검증 작업에 보통 쓰이며, forceUpdate() 함수에선 해당 함수가 호출 되지 않는다.

 

getSnapshotBeforeUpdate(prevProps, prevState) -> 컴포넌트의 변경된 내용을 가상화면에서 완성 시킨 후 호출한다. 실제 출력 전이므로, 그 전에 이행되는 엘리먼트의 크기 또는 스크롤 위치 등의 DOM 정보에 접근할 때 사용된다.

 

componentDidUpdate(prevProps, prevState, snapshot) -> 화면이 출력된 후 호출되는 함수. 인자에 snapshot을 받기에, 해당 접근된 값을 이용하여 DOM 정보를 변경할 때 사용됩니다.

 

componentWillUnmount() -> 컴포넌트가 소멸되기 직전에 호출되는 함수. 컴포넌트에서 감시되고 있는 작업들을 해제시키는 작업에 필요한 함수이다. setInterval()을 사용되었다면 이를 clearInterval()로 해제시켜야 한다.