4. 컴포넌트의 라이플사이클 메서드

마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것

constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드

getDerivedStateFromProps : props에 있는 값을 state에 동기화하는 메서드

render : 우리가 준비한 UI를 렌더링하는 메서드

componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

 

업데이트 : 아래 4개 일경우 메서드를 호출한다.

1) props 가 바뀔때

2) state 가 바뀔 때

3) 부모 컴포넌트가 리렌더링될때

4) this.forceUpdate로 강제로 렌더링을 트리거할 때

 

getDerivedStateFromProps : 위와동일

shouldComponenUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드, false를 반환하면 다음단계로 넘어가지 않는다.

render : 위와동일

getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드

componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

 

언마운트 : 마운트의 반대 과정, 컴포넌트를 DOM에서 제거하는 것

componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

 

---

- render() 함수 : 라이프사이클 메서드 중 유일한 필수 메서드

이 메서드 안에서 this.props와 this.state에 접근가능하며, 리액트 요소를 반환

반환은 div태그나 따로 선언한 컴포넌트가 가능

아무것도 보여주고 싶지 않다면 null 또는 false를 반환

 

주의사항 : 메서드 안에서는 절대로 state를 변형해서는 안되며 웹 브라우저에 접근해서도 안된다. DOM 정보를 가져오거나 변화를 줄 떄는 componentDidMount에서 처리해야된다.

 

- construcotr 메서드

이 메서드에서는 초기 state를 정할 수 있다.

 

- getDerivedStateFromProps 메서드

리액트 v16.3 이후 생긴 메서드

props로 받아온 값을 state에 동기화시키는 용도

static getDerivedStateFromProps(nextProps, prevState){
    if(nextProps.value != prevState.value) { // 조건에 따라 특정 값 동기화
    	return { value : nextProps.value };
    }
    return null;
}

 

- componentDidMount 메서드

이 안에서 다른 바라스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리

 

- shouldComponenUpdate 메서드

이 메서드 안에서 현재 props와 state는 this.props와 this.state로 접근하고, 새로 설정될 props 또는 state는 nextProps와 nextState로 접근할수 있다.

프로젝트 성능을 최적화할 때, 상황에 맞는 알고리즘을 작성시 리렌더링을 방지할 때는 false를 반환하게 해야한다.

 

- getSnapshotBeforeUpdate 메서드

리액트 v16.3 이후 생긴 메서드

여기에서 반환하는 값은 componentDidUpdate 에서 세 번째 파라미터인 snapshot 값으로 전달받을 수 있다.

// 스크롤바 위치 유지
getSnapshotBeforeUpdate(prevProps, prevState){
    if(prevState.array != this.state.array){
    	const{scrollTop, scrollHeight}= this.list
        return {scrollTop, scrollheight};
    }
}

 

 

- componentDidUpdate 메서드

업데이트가 끝난 직후이므로, DOM 관련 처리를 해도 무방

여기에서 prevProps 또는 prevState를 사용하여 컴포넌트 이전에 가졌던 데이터에 접근할 수 있습니다.

또 getSnapshotBeforeUpdate 에서 반환한 값이 있다면 여기에 snapshot 값을 전달받을 수 있습니다.

 

- componentWillUnmount 메서드

이것은 컴포넌트를 DOM에서 제거할 때 실행

componentDidMount 에서 등록한 이벤트 타이머, 직접 생성한 DOM이 있다면 여기에서 제거 작업을 실행해야 한다.

 

---

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;

 

App.js

import React, { Component } from 'react';
import LifeCycleSample from './LifeCycleSample';

// 랜덤 색상을 생성합니다
function getRandomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

class App extends Component {
  state = {
    color: '#000000'
  }

  handleClick = () => {
    this.setState({
      color: getRandomColor()
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>랜덤 색상</button>
        <LifeCycleSample color={this.state.color}/>
      </div>
    );
  }
}

export default App;

 

결과