리액트 #07 - Component Life Cycle

ReactJS에는 컴포넌트들에 대한 라이프 사이클 메서드들이 존재합니다.

이번 포스트에서는 이 라이프 사이클 메서드들에 대해서 알아봅시다.

Life Cycle Methods

---

- componentWillMount

서버와 클라이언트 모두에게 렌더링하기 전에 작동됩니다.

- componentDidMount

클라이언트에서 첫 렌더링이 이루어지고 난 후에 작동됩니다.

이 메서드에서 AJAX 리퀘스트나 DOM, state 갱신을 진행합니다.

또한 다른 자바스크립트 프레임워크나 다른 함수들과 합쳐지는 것에 사용되며,

이 때는 setInterval이나 setTimeout 등과 같은 함수로 지연을 시키게 됩니다.

- componentWillReceiveProps

Prop가 갱신되면, 다른 렌더링이 작동하기 전에 불려집니다.

- shouldComponentUpdate

true나 false를 반환해야합니다.

여기선 컴포넌트가 갱신이 될 것인지 아닌지에 대해서 정의하게 됩니다.

기본적으로 true 값을 반환합니다.

state나 props가 변경된 후, 렌더링이 필요없다고 생각하면 false를 반환하면 됩니다.

- componentWillUpdate

렌더링 전에 작동됩니다.

- componentDidUpdate

렌더링 후에 작동됩니다.

- componentWillUnmount

dom에서 컴포넌트가 unmount되었을 때 작동됩니다.

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App';

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

setTimeout(() => {

   ReactDOM.unmountComponentAtNode(document.getElementById('root'));}, 10000);

App.js

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;

- 실행 화면 (초기)

- 실행 화면 (버튼 클릭)

- 실행 화면 (10초뒤 언마운트)