카테고리 없음

[React] Life Cycle

미니시리 2024. 11. 24. 23:25

라이프 사이클 메서드의 종류는 크게 마운트, 업데이트, 언마운트 종류로 나눌 수 있습니다.

 

1. 마운트

마운트는 컴포넌트가 페이지에 새로 추가될 때 발생하는 단계이다. 이 단계에서는 다음과 같은 메서드가 호출된다.

  • constructor : 컴포넌트가 생성될 때 호출
  • getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드이다. 컴포넌트가 생성될 때와 새로운 props를 받았을 때 호출된다.
  • render : 컴포넌트가 렌더링될 때 호출된다. 즉, 우리가 준비한 UI를 렌더링해주는 메서드이다.
  • componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드이다.

2. 업데이트

컴포넌트는 다음과 같은 총 네 가지 경우에 업데이트된다.

  • props의 변경
  • state의 변경
  • 부모 컴포넌트 리렌더링
  • this.forceUpdate로 인한 강제 렌더링

이렇게 컴포넌트를 업데이트 할 경우 다음 메서드들을 호출한다.

  • getDerivedStateFromProps : 컴포넌트가 생성될 때와 새로운 props를 받았을 때 호출된다. props의 변화에 따라 state도 변화를 주고 싶을 때 사용한다.
  • shouldComponentUpdate : 컴포넌트가 업데이트되어야 하는지 여부를 결정한다. 이 메서드는 true 혹은 false 값을 반환행야하며, true를 반환하면 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지한다. 즉, false일 경우 컴포넌트가 리렌더링 되지 않는다.
  • render : 컴포넌트가 리렌더링될 때 호출된다.
  • getSnapshotBeforeUpdate : render() 메서드 호출 직후, 실제로 DOM에 반영되기 전에 호출되는 메서드이다.
  • componentDidUpdate : 컴포넌트가 업데이트된 후 호출된다.

3. 언마운트

업데이트는 컴포넌트의 state나 props가 변경될 때 발생하는 단계이다. 이 단계에서는 다음과 같은 메서드가 호출된다.

  • componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출되는 메서드이다.

 

메서드 종류

render()
render() 메소드는 Class Component의 필수적으로 들어가야 하는 메소드입니다.
 
  • React elements 일반적으로 JSX를 통해 생성됩니다.
 
return (
<div className="wrap-movie">
<div className="movie-poster">
<MoviePoster poster={posterUrl}/>
</div>
<div className="box-movie">
<span className="movie-title">{title}</span>
<div className="movie-genres">
{genres.map((genre, idx) => {<MovieGenre genres={genre} index={idx}/>})}
</div>
<p className="movie-synopsis">
{synopsis}
</p>
</div>
</div>
)
  • Array and Fragments Fragments를 사용하면 자식 컴포넌트들을 그룹화 할 수 있다. Fragments 를 자세히 알아 보실 수 있습니다.
  • Portals Portals 는 부모 Component의 DOM계층 외부에 존재하는 DOM 노드 자식에 렌더링하는 일급 방법을 제공한다. 자세히 알아 보고 싶다면 Portals 링크를 참조 하세요.
  • String and numbers 이들은 텍스트 노드로 DOM에 렌더링 됩니다.
  • Booleans or null 렌더링되면 안됩니다. 이 둘은 어떠한 판단이나 테스트를 위해 존재하며, 렌더링 될 요소는 아닙니다.
추가적으로 render() 는 순수한 함수입니다. 즉, 입력이 동일하면 출력 또한 항상 동일 하여야 합니다.

 

constructor()

State를 초기화 하지 않고 메소드를 바인딩 하지 않는 다면 constructor()를 쓸 필요 없습니다.
Component가 마운트 되기전에 constructor()가 먼저 호출 되며 구현 시에는 super()가 다른 구문들 맨 앞에 오게 해야 합니다.
그 이유는 그렇지 않으면 this.props 가 정의 되지 않아 오류가 발생 할 수 있습니다.
일반적으로 React의 constructor는 두 가지 용도로만 사용됩니다.

  • this.state Oject를 통해 local state (Component) 를 초기화 합니다.
  • 이벤트 처리기 메소드를 바인딩 합니다.
constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

 

componentDidMount()

Component가 마운트 된 후 즉시 호출 됩니다. 그러므로 DOM 노드에서 필요한 초기화는 이 메소드에서 진행 되어야 합니다.
class App extends Component {
  state = {};


  /**
   * Life cycle of React
   */
  componentDidMount() {
    this._getMovies();
  }
}

 

componentDidUpdate()

State가 업데이트 발생 한 직후 호출 됩니다. 초기 렌더링에서는 호출 되지 않습니다. 

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

위 예제처럼 조건을 걸어 두지 않으면 무한 루프에 빠질 수 있습니다. 또는 조건을 제대로 정확하게 걸어 두지 않으면 불필요한 추가 렌더링이 발생 할 수 있습니다. 물론 유저들에게는 잘 보이지 않겠지만 이건 성능상 매우 치명적일 수 있습니다.

 

componentWillUnmount()

마운트가 해제되거나 소멸 되기 직전에 호출 됩니다.

 componentWillUnmount()

마운트가 된 컴포넌트에 마운트가 해제 되면서 제거 되거나 정리 되어야 하는 요소들은 이 메소드에 작성 하여 주시면 됩니다.

 

저작자표시