[ReactJS] ReactJS로 영화 웹 서비스 만들기 (10) - 컴포넌트 생명주기

react component에서 사용하는 유일한 function은 render function 이다.

하지만 React.Component는 render말고 더 많은걸 가지고 있다.

이들은 life cycle(생명주기) method를 가지는데, life cycle method는 기본적으로react가 component를 생성하고 없애는 방법이다.

component가 생성될 때, render 전에 호출되는 몇 가지 function이 있다.

component가 render 된 후, 호출되는 다른 function들도 있다.

가장 중요한 애들을 살펴보자.

 

React.Component – React

 

1. Mounting : Component가 screen에 표시됨

아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출된다.

- constructor() : constructor는 JavaScript에서 class를 만들 때 호출된다.
- static getDerivedStateFromProps() : 이건 범위를 넘어가기 때문에 다루지 않는다. 쓸일도 많이 없을거다.
- render()
- componentDidMount() : 컴포넌트가 처음 render 되었는지 알려줌

 

2. Updating

 

 

props 또는 state가 변경되면 갱신이 발생한다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출된다.

-static getDerivedStateFromProps() : 안 다룰거임
-shouldComponentUpdate() : 업데이트를 할지 말지 결정
-render()
-getSnapshotBeforeUpdate() : 살면서 쓸일 없음
-componentDidUpdate() 

 

3. UnMounting

아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출된다

- componentWillUnmount()