[React 기본] Lifecycle Methods

Lifecycle Methods란 ?

vue의 lifeCycleHook 처럼 react에도 있다.
리액트가 컴포넌트를 렌더링 하기까지 거치는 순서인데, 그 순서마다 lifeCycle이벤트로 확인해볼 수 있다.
라이프사이클 메소드는 console.log로 찍어 확인하는 것이 제일 좋은 것 같다.

 

 

---

자주쓰이는 lifeCycle Methods

1. constructor

마운트되기 전에 최초로 한번 호출된다.

1. this.state 초기화
2. 이벤트 핸들러 메소드를 인스턴스에 바인딩

this.state생성자는 직접 할당해야 하는 유일한 위치라고 하는데, 여기서 주의할 점은 props로 들어온 걸 state에 넣으면 안된다는 점이다. 변경이 필요한 경우에는 componentDidMount를 사용하여야한다.

 

2. componentDidMount

구성 요소가 마운트된 직후에 호출된다. (브라우저가 화면을 업데이트하기 전에 발생)
즉, DOM 노트가 그려질때 실행되는 함수이다.

 

3. componentDidUpdate

업데이트가 발생한 직후에 호출되는 메소드이다.
초기 렌더링에 대해서는 호출되지 않고, 데이터가 변경되면 이 메소드가 호출된다.

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}​

 

공식문서에서 가져온 예제인데, 저런식으로 props의 id와 이전의 id값을 비교하여 필요한 경우에만 api통신을 하게끔 만들 수도 있다.

 

4. componentWillUnmount

구성 요소가 마운트 해제되고 파괴되기 직전에 호출된다.

 

 

---

 

나머지는 자주사용되지 않는다고 나오는데, 필요한 경우 공식문서 참고하는 것이 좋을 것 같다.

Lifecycle Methods 공식문서

React.Component – React