React 💬8

🎈 Life Cycle 🎈

 

📌 componentWillMount 

: 서버와 클라이언트에서 렌더링 전에 실행된다.

 

📌 componentDidMount

: 클라이언트쪽의 처음 렌더링이 일어난 후에 실행된다. 여기서 AJAX 요청이나 DOM 혹은 state update가 일어나야한다. 

: 이 방법은 다른 JavaScript 프레임워크들과 합치거나, setTimeout 또는 setInterval과 같은 실행이 지연되는 함수와의 통합에 사용된다.

: 우리는 이 method를 state 업데이트에 사용하여 다른 lifecycle method를 야기할수 있다.

 

📌 componentWillReceiveProps

: props가 update되고 다른 render가 불리기 전에 일어난다.

: setNewNumer에서 우리는 이 method가 불려지게 한다.

 

📌 shouldComponentUpdate

: True or False 값을 리턴한다. (default값은 True)

: 해당 method로 component가 update될 것인지 말것인지를 판단한다

: 컴포넌트가 state나 props가 update 된 후에 render될 필요가 없다고 확신한다면 False를 return 하면 된다.

 

📌 componentWillUpdate

: rendering 전에 불러진다.

 

📌 componentDidUpdate

: rendering 후에 불러진다.

 

📌 componentWillUnmount

: 컴포넌트가 dom에서 분리된 후에 불러진다. 우리는 컴포넌트를 main.js에 분리한다.

 

 

🔧 이번 예제에서는 초기 state값을 생성자에 세팅해두고, setNewnumber가 state를 update하는데 쓰인다.

 

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);

 

 

💻