Life Cycle

🖥️ Life Cycle

 

React는 3개의 Life Cycle을 가지고 있다. 그 3 가지는 Mounting, Updating, Unmounting이 있다.

Mounting은 컴포넌트가 시작 될 때, Updating은 state가 업데이트 되고 UI가 업데이트 될 떄 Unmounting은 컴포넌트가 종료 될 때이다.

 

⌨️ Mounting

컴포넌트가 처음 실행이 될 때 생성단계를 마운트라고 표현을 한다.

 

• Constructor(class Component)

constructor(props) {
  super(props);
  this.state = { counter: 0 };
  // this.setState() 호출은 X
}

 

컴포넌트 생성자 메서드로, 컴포넌트가 생성이 되면 제일 먼저 실행이 되는 메서드이다. state와 props를 접근하여 값을 할당할 수 있다.

 

• getDerivedStateFromProps

static getDerivedStateFromProps(props, state)

 

props로 받아온 것을 state에 설정하고 싶을 때 사용이 되며, 최초 마운트 시와 갱신 시 모두에서 render 메서드를 호출하기 직전에 호출된다. 특정 객체를 반환하게 되면 해당 객체의 값이 state로 갱신이 되며, null을 반환하게 되면 아무것도 갱신하지 않을 수 있다.

 

• render

render()

 

render()은 컴포넌트를 렌더링 해주는 메서드이다. 

클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드이다.

 

• componentDidMount

componentDidMount()

 

컴포넌트가 마운트, 첫번째 렌더링이 된 직후 호출되는 메서드이다. 이 시점에는 화면이 구현이 되어 있는 상태이다.

componentDidMount에서는 DOM에 접근하여 사용할 수 가 있다. 그래서 여기에서는 주로 AJAX 요청을 하거나 DOM에 속성을 읽거나 변경을 하는 작업을 한다. (setTimeout, setInterval 등등)

 

⌨️ Updating

컴포넌트의 업데이트 시

 

• getDerivedStateFromProps

위에서 설명했듯이 값이 갱신되어 업데이트 시에도 render 전에 메서드가 실행된다.

 

• shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

 

컴포넌트를 다시 리렌더링 할지 말지 결정하는 메서드이다. props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다. 기본값은 true이며, return false를 하면 render를 취소할 수도 있다.

 

• render

렌더링을 해준다.

 

• getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

 

가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출된다. 이 메서드를 사용하면 DOM 상태가 변경이 되기전의 값을 반환하여 componentDidUpdate에서 인자로 받아서 사용이 가능하다.

 

• componentDidUpdate

componentDidUpdate(prevProps, prevState) {}

componentDidUpdate(prevProps) {
  // 전형적인 사용 사례 (props 비교를 잊지 마세요)
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

 

갱신이 일어난 직후에 호출이된다. 이 메서드는 최초 렌더링에서는 호출되지 않는다.

 

⌨️ Unmounting

언마운트라는 것은 컴포넌트가 화면에서 제거 되는것을 의미한다.

 

componentWillUnmount

componentWillUnmount()

 

컴포넌트가 사라지기 직전에 호출을 하고, 주로 여기서는 DOM에 등록했었던 이벤트들을 제거해주는 용도로 사용이 된다.

 

⌨️ function Life Cycle

출처 : https://wavez.github.io/react-hooks-lifecycle/

클래스 컴포넌트 에서는 componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps의 역할을 함수 컴포넌트는 useEffect가 모든 역할을 한다.

 

1. 컴포넌트가 마운트 된 후
2. 컴포넌트가 업데이트되고 난 후
3. 컴포넌트가 언마운트 되기 전 모두 실행

 

  useEffect(()=>{
    console.log("useEffect2 Firee", counter);
  },[counter]) //어레이의 값을 넣으면 컴퓨터가 주시한다. 즉 값이 바뀌면 `componentDidUpdate`가 된다.
//어레이의 내용이 하나라도 바뀌면 render가 된다.