7.3.1 예제 컴포넌트 생성

    src 디렉터리에 LifeCycleSample.js라는 컴포넌트를 만드세요.

    LifeCycleSample.js

    import React, { Component } from 'react';
     
    class LifeCycleSample extends Component {
      state = {
        number: 0,
        color: null,
      }
     
      myRef = null; // ref 설정할 부분
    
      constructor(props) {
        super(props);
        console.log('constructor');
      }
     
      static getDerivedStateFromProps(nextProps, prevState) {
        console.log('getDerivedStateFromProps'); 
        if(nextProps.color != = prevState.color) {
          return { color: nextProps.color };
        }
        return null;
      }
     
      componentDidMount() {
        console.log('componentDidMount');
      }
     
      shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate', nextProps, nextState);
        // 숫자의 마지막 자리가 4 리렌더링하지 않습니다.
        return nextState.number % 10 != = 4;
      }
     
      componentWillUnmount() {
        console.log('componentWillUnmount');
      }
    
      handleClick = () => {
        this.setState({
          number: this.state.number + 1
        });
      }
     
      getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('getSnapshotBeforeUpdate');
        if(prevProps.color != = this.props.color) {
          return this.myRef.style.color;
        }
        return null;
      }
     
      componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate', prevProps, prevState);
        if(snapshot) {
          console.log('업데이트되기 직전 색상: ', snapshot);
        }
      }
     
      render() {
        console.log('render');
    
        const style = {
          color: this.props.color
        };
     
        return (
          <div>
            <h1 style={style} ref={ref => this.myRef=ref}>
              {this.state.number}
            </h1>
            <p>color: {this.state.color}</p>
            <button onClick={this.handleClick}>
              더하기
            </button>
          </div>
        )
      }
    }
     
    export default LifeCycleSample;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.