ReactJS - React에서의 Lifecycel Events | NomadCoders | 프로그래밍 공부

* 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 

모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.*

이번 시간에 다룰 component lifecycle이란,

컴포넌트는 여러 기능을 정해진 순서대로 실행하는데, 그것을 의미한다.

우리가 render을 할 때, 그러니까 우리가 컴포넌트를 띄울 때, 

위의 사진대로 하겠다는 것이다.

componentWillMount() -> render() ->componentDidMount()

이 싸이클은 자동으로 발생한다. 원하든 원하지 않든!

정말 위에 말한 순서대로 발생하는지 console.log()을 넣어보자.

콘솔 창을 띄워보면, 정말로

WillMount -> DidRender -> DidMount

순서대로 콘솔 입력이 출력된다.

즉, 컴포넌트가 '존재'하기 시작하면, 

리액트 세계는 will mount -> did render -> did mount를 할 것이다.

이 싸이클을 알아두는 게 중요한 이유는, 컴포넌트를 만드는데 도움이 될 것이기 때문이다.

will mount를 보면 사이클이 시작되었음을 알게 될 것이고,

render를 보면 이제 컴포넌트가 리액트 세계에 '존재'하게 되었음을 알게 되고,

did mount를 보면, 이제 성공적으로 리액트 세계에 컴포넌트가 자리 잡았음을 알게된다.

이 사이클은 render에 관한 것이고,

Update는 좀 더 스텝이 많다.

componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate()

-> render() -> componentDidUpdate()

componentWillReceiveProps()는 컴포넌트가 새로운 props을 받았다는 뜻이다.

shouldComponentUpdate()에서 리액트는 old prop와 새로운 props를 살펴본 다음에,

이전과 새로운 props가 다르면, 리액트는 '업데이트 = true'라고 생각한다.

그러면 업데이트가 발생할 것이다.

componentWillUpdate()에서 업데이트를 할 것이다.

그 다음 render(), 마지막으로 componentDidUpdate()

기억해야할 것은, 컴포넌트는 많은 functions을 갖고 있고, 

그것들은 순서대로, 자동으로 작동한다.