[React] component Llifecycle

Lifecycle
모든 component는 여러가지의 생명주기 메소드(lifecycle method)를 가진다.

 

참고 : https://ko.reactjs.org/docs/state-and-lifecycle.html

 

 

 

대표적인 것만 적어보겠다.

 

Mount

컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출

- constructor()
component가 mount되기 전에 호출

  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

constructor() 를 구현할 때에는 super(props)를 호출해야 한다.

 

* constructor() 내부에서 setState()를 호출하면 안된다.

state가 필요하다면 생성자 내에서 this.state에 초기 state 값을 할당하면 된다.

- render()

- componentDidMount()
컴포넌트가 마운트된 직후에 호출

Update

props 또는 state가 변경되면 갱신이 발생. 컴포턴트가 다시 렌더링 될 때 순서대로 호출

- componentDidUpdate()

갱신이 일어난 직후에 호출

Unmount

- componentWillUnmount()

컴포넌트가 마운트 해제되어 제거되기 직전에 호출

 

 

브라우저와 상호작용하는 작업이 필요하다면,

해당 작업을 componentDidMount()이나 다른 생명주기 메서드 내에서 수행해야 한다.

render()를 순수하게 유지해야 컴포넌트의 동작을 이해하기 쉽다.

 

 

좀 더 자세한 내용은 아래에서 확인할 수 있다.

https://ko.reactjs.org/docs/state-and-lifecycle.html