리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해준다.

Declarative

Initialization → Mounting → Updation(props/states) → Unmounting

Component 생성 및 마운트(< v16.3)

constructor

conponentWillMount

render(최초랜더)

componentDidMount

<script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

    class App extends React.Component {

      state = {
        age: 39
      }

      constructor(props){
        super(props);

        console.log('constructor', props)
      }

      render(){
        console.log('render');
        return(
          <div>
            <h2>
              Hello {this.props.name} - {this.state.age}
            </h2>  
          </div>
        );
      }
      componentWillMount(){
        console.log('componentWillMount'); 
      }
      componentDidMount(){
        console.log('componentDidMount');
        
        setInterval(()=>{
          // console.log("setInterval");
          this.setState(state => ({...state, age: state.age + 1}));
        }, 1000);
      }
    }

    ReactDOM.render(<App name="Mark" />, document.querySelector('#root'))
  </script>

Component props, state 변경(< v16.3)

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

<script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

    class App extends React.Component {

      state = {
        age: 39
      }

      constructor(props){
        super(props);

        console.log('constructor', props)
      }

      render(){
        console.log('render');
        return(
          <div>
            <h2>
              Hello {this.props.name} - {this.state.age}
            </h2>  
          </div>
        );
      }
      componentWillMount(){
        console.log('componentWillMount'); 
      }
      componentDidMount(){
        console.log('componentDidMount');
        
        setInterval(()=>{
          // console.log("setInterval");
          this.setState(state => ({...state, age: state.age + 1}));
        }, 1000);
      }
      componentWillReceiveProps(nextProps){
        console.log('componentWillReceiveProps', nextProps)
      }
    
      shouldComponentUpdate(nextProps, nextState){
        console.log('shouldComponentUpdate', nextProps, nextState)
        return true;
      }
      
      componentWillUpdate(nextProps, nextState){
        console.log("componentWillUpdate", nextProps, nextState)
      }

      componentDidUpdate(prevProps, prevState){
        console.log("componentDidUpdate", prevProps, prevState)
      }

    }

    ReactDOM.render(<App name="Mark" />, document.querySelector('#root'))
  </script>

ComponentWillReceiveProps

• Props 를 새로 지정했을 때 바로 호출됨
• 여기는 State 의 변경에 반응하지 않음
  • 여기서 Props 의 값에 따라 State 를 변경해야 한다면,
    • setState 를 이용해 State를 변경함
    • 그러면 다음 이벤트로 각각 가는 것이 아니라 한 번에 변경됨.

ShouldComponentUpdate

• Props 만 변경되어도
• State 만 변경되어도
• Props & State 둘 다 변경되어도
• newProps 와 newState 를 인자로 해서 호출
• return type 이 boolean
  • true 면 render
  • false 면 render 가 호출되지 않음
  • 이 함수를 구현하지 않으면, default 는 true

ComponentWillUpdate

• 컴포넌트가 재 랜더링 되기 직전에 불림
• 여기선 setState 같은 것을 쓰면 안됨

ComponentDidUpdate

• 컴포넌트가 재 랜더링을 마치면 불림

Component 언마운트(< v16.3)

componentWillUnmount

<script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

    class App extends React.Component {

      state = {
        age: 39
      }
      interval = null;

      constructor(props){
        super(props);

        console.log('constructor', props)
      }

      render(){
        console.log('render');
        return(
          <div>
            <h2>
              Hello {this.props.name} - {this.state.age}
            </h2>  
          </div>
        );
      }
      componentWillMount(){
        console.log('componentWillMount'); 
      }
      componentDidMount(){
        console.log('componentDidMount');
        
        this.interval = setInterval(()=>{
          // console.log("setInterval");
          this.setState(state => ({...state, age: state.age + 1}));
        }, 1000);
      }
      componentWillReceiveProps(nextProps){
        console.log('componentWillReceiveProps', nextProps)
      }
    
      shouldComponentUpdate(nextProps, nextState){
        console.log('shouldComponentUpdate', nextProps, nextState)
        return true;
      }
      
      componentWillUpdate(nextProps, nextState){
        console.log("componentWillUpdate", nextProps, nextState)
      }

      componentDidUpdate(prevProps, prevState){
        console.log("componentDidUpdate", prevProps, prevState)
      }
      
      componentWillUnmount(){
        clearInterval(this.interval);
      }

    }

    ReactDOM.render(<App name="Mark" />, document.querySelector('#root'))
  </script>

Component 라이프사이클 변경 (v16.3)

constructor

componentWillMount ⇒ getDerivedStateFromProps

render

componentDidMount

componentWillReceiveProps ⇒ getDerivedStateFromProps

shouldComponentUpdate

render

componentWillUpdate ⇒ getSnapshotBeforeUpdate

(dom 에 적용)

componentDidUpdate

componentWillUnmount

<script type="text/babel">
    console.log(React);
    console.log(ReactDOM);
		
		let i =0;

    class App extends React.Component {
      state = {list: []};

      render() {
        return(
          <div id="list" style={{height: 100, overflow:"scroll"}}>
            {this.state.list.map((i) => {
              return <div>{i}</div>;
            })}  
          </div>
        );
      }
      componentDidMount(){
        setInterval(()=>{
          this.setState((state) => ({
            list: [...state.list, i++]
          }))
        }, 1000)
      }

      getSnapshotBeforeUpdate(prevProps, prevState){
        if(prevState.list.length === this.state.list.length) return null;
        const list = document.querySelector('#list');
        return list.scrollHeight - list.scrollTop;
      }
      componentDidUpdate(prevProps, prevState, snapshot){
        console.log(snapshot);
        if(snapshot === null) return;
        const list = document.querySelector('#list');
        list.scrollTop = list.scrollHeight - snapshot;
      }
    }

    ReactDOM.render(<App name="Mark" />, document.querySelector('#root'))

  </script>

Component 에러 캐치

componentDidCatch

class App extends React.Component {
  state = {
    hasError: false
  };
  render(){
    if(this.state.hasError){
      return <div>예상치 못한 에러가 발생했다.</div>;
    }
    return <WebService />;
  }
  componentDidCatch(error, info){
    this.setState({jasError: true});
  }
}

ReactDOM.render(<App name="Mark" />, document.querySelector('#root'))