[Front end] React #6 웹 서비스 만들기 Component Life Cycle

이번에는 리액트의 컴포넌트 라이프사이클을 배워보도록 하자. 컴포넌트는 여러 기능 들을 정해진 순서대로 실행하는 것을 라이프사이클이라고 한다. reder를 할 때, 즉 컴포넌트를 띄울 때, 이 순서대로 진행된다.

Render : componentWillMount() -> render() -> componentDidMount()

이 순서는 자동으로 발생된다.

console.log를 통해 순서를 알아보았다. 다시 한번 순서를 기억하기 바란다.

 

이번에는 Update의 순서를 알아보자. 조금 스텝이 많다.

Update : componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() == true -> render() -> componentDidUpdate()

리액트는 old props, new props를 살펴본 다음에 이전과 다른 props가 있으면, 리액트는 update = true라고 생각한다.

render를 하거나 update를 할 때 항상 이와 같은 순서로 작동한다. 이 순서를 이해하면 컴포넌트를 만들 때 도움이 될 것이다. 기억해야 할 것은, 컴포넌트는 많은 function을 가지고 있고, 그들의 순서대로, 자동으로 작동한다는 사실이다. 그 순서를 변경하거나 막을 수는 없다.