기술개발/React, Frontend

리액트 - react lifecycle

한승욱 2021. 3. 12. 18:29
반응형

(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다.

 

Lifecycle

React Lifecycle
Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting. Mounting means putting elements into the DOM.
https://www.w3schools.com/react/react_lifecycle.asp

Lifecycle은 크게 Mounting, Updating, Unmounting의 3가지 단계가 있다.

Mounting

  • 리액트 컴포넌트가 선언이 되어서 호출이 되었을 때
constructor()
getDerivedStateFromProps()
render()
componentDidMount()

순서는 위와 같음.

constructor - props나 state 정의

getDerivedStateFromProps - render 바로 직전에 props나 state 값을 바꿔주거나? 작업을 할때 이것을 선언하고 설정해줌 

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

# red가 아닌 yellow가 찍힘
# 출처: w3schools.com

render - 돔을 만들고 화면에 렌더링?

componentDidMount - 실제 렌더링이 끝나고 호출됨.

props와 state차이 다시 설명:

  • props 역시도 변경되면 리렌더링 일어남

Updating

  • state나 props를 변경하게 되면 updating이 일어나게 됨
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

getDerivedStateFromProps - 앞서 설명.

shouldComponentUpdate - 정말로 이 컴포넌트를 리렌더링 시킬 것인지에 대한 메소드. 디폴트=true. 굳이 업데이트를 안 시킬 이유는 없겠지만 무언가 활용방안(예외처리????)가 있을 것 같다.

render - 앞서 설명

getSnapshotBeforeUpdate - 업데이트 하기 전에 props와 state에 접근할 수 있는 메소드.

componentDidUpdate - 업데이트 완료되고 실행되는 메소드

Unmounting

  • 컴포넌트가 사라질 때 Unmounting이 일어나게
componentWillUnmount()

componentWillUnmount - 사라질때 무언가 alert 나 특정 로직을 실행하게끔 구현 가능

반응형