[React] Component Life Cycle method

현재까지 class component의 메소드는 render 만을 접해보았습니다.

하지만 단순히 render 말고 다른 메소드들을 가지고 있는데 바로 life cycle method 입니다.

이 때 life cycle 이라 함은 component 가 생성되고 사라지기 까지의 생명주기를 말합니다.

life cycle method 은 그 때 실행되는 함수들이죠.

이번 포스팅에서는 life cycle method 에 대해서 알아보도록 하겠습니다.

 

mounting

mount 는 component가 생성되는 것을 의미합니다.

반대로 unmount 는 component 가 제거 되는 것을 의미하죠. unmount 는 아래서 살펴보도록 하겠습니다.

 

constructor()

가장 먼저 실행되는 메소드는 construnctor 입니다.

react 의 개념이라기 보다는 javascript 의 class 에 해당하는 개념입니다.

생성자라고도 하죠.

component 가 mount 되기 전에 실행이 됩니다.

class 안에서 선언되며 사용되기 위해서는 꼭 super(props) 를 통해 부모의 생성자를 호출해야합니다.

class App extends Component {
  constructor(props){
    super(props);
    // 생략
  }
}

주로 state 값을 선언하고 초기화하는데 사용됩니다.

 

render()

render()는 이미 사용해봤습니다.

component 를 반환하는데 사용되는 메소드 이었습니다.

 

componentDidMount()

component 가 DOM 에 mount 된 직후 실행되는 메소드입니다.

외부의 데이터를 불러오거나 네트워크 요청을 해야하는 경우 해당 함수에서 처리합니다.

 

Updating

현재 상황에서는 Add or Minus 를 클릭해서 state 를 변경할 때나 혹은 Parent component 로 부터 새로운 props 를 받는 순간을 update 라고 합니다.

render()

update 시에도 바뀐 부분을 다시 반환해주기 위해 render 메소드가 실행됩니다.

 

componentDidUpdate()

componentDidMount() 와 마찬가지로 update 과정에서 render() 가 완료된 직후 실행되는 메소드입니다.

componentDidUpdate(prevProps, prevState, snapshot)

이름에서 알 수 있듯이 prevProps, prevState update 전 prop 과 state 를 인자로 받아 현재의 변경여부를 파악할 수 있습니다.

snapshot 은 getSnapshotBeforeUpdate() 메소드를 구현했다면 세번째 인자로 snapshot을 받을 수 있습니다.

 

Unmounting

componentWillUnmount()

component 가 최종적으로 제거되기 전에 실행되는 메소드입니다.

제거되는 component 내에서 이루어지던 네트워크 요청 등의 이벤트들을 종료하기 위해 사용합니다.

 

지금까지의 내용을 이미지로 확인하면 다음과 같습니다.

 

 

이외에도 여러 life cycle method 등이 존재하지만 자주 사용하지 않아 생략했습니다.

아래 링크에서 더 많은 메소드들을 확인할 수 있습니다.

https://ko.reactjs.org/docs/react-component.html

React.Component – React