ReactJS-구성 요소 수명주기

이 장에서는 구성 요소 수명주기 방법에 대해 설명합니다.

수명주기 방법

  • componentWillMount 렌더링 전에 서버와 클라이언트 측 모두에서 실행됩니다.

  • componentDidMount클라이언트 측에서만 첫 번째 렌더링 후에 실행됩니다. AJAX 요청과 DOM 또는 상태 업데이트가 발생해야하는 곳입니다. 이 방법은 다른 JavaScript 프레임 워크 및 다음과 같은 지연된 실행 기능과의 통합에도 사용됩니다.setTimeout 또는 setInterval. 다른 수명주기 메서드를 트리거 할 수 있도록 상태를 업데이트하는 데 사용하고 있습니다.

  • componentWillReceiveProps다른 렌더가 호출되기 전에 소품이 업데이트 되 자마자 호출됩니다. 우리는setNewNumber 상태를 업데이트했을 때

  • shouldComponentUpdate 돌아와야한다 true 또는 false값. 이렇게하면 구성 요소가 업데이트되는지 여부가 결정됩니다. 이것은true기본적으로. 구성 요소를 렌더링 할 필요가 없다고 확신하는 경우state 또는 props 업데이트되면 반환 할 수 있습니다. false 값.

  • componentWillUpdate 렌더링 직전에 호출됩니다.

  • componentDidUpdate 렌더링 직후에 호출됩니다.

  • componentWillUnmount컴포넌트가 dom에서 마운트 해제 된 후 호출됩니다. 구성 요소를main.js.

다음 예에서는 이니셜을 설정합니다. state생성자 함수에서. 그만큼setNewnumber 업데이트하는 데 사용됩니다 state. 모든 수명주기 메서드는 콘텐츠 구성 요소 내에 있습니다.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

초기 렌더링 후 다음 화면이 표시됩니다.