구성 요소 수명 주기

React 구성 요소는 수명 주기 이벤트라고 하는 특정 수명 이벤트를 실행합니다. 이러한 수명 주기의 이벤트는 수명 주기 메서드와 연결되어 있습니다. 이 장의 시작 부분에서 구성 요소 생성에 대해 설명할 때 이러한 방법 중 몇 가지를 설명했습니다.
수명 주기 메서드는 구성 요소의 단계 및 특성에 대한 후크를 제공합니다. 섹션 6.2에서 가져온 코드 예제에서는 수명 주기 이벤트 componentDidMount , componentWillUnmount 및 getInitialState 수명 주기 메서드의 발생을 콘솔에서 기록하고 있습니다.

var Timer = React.createClass({
    getInitialState: function() { 
        console.log('getInitialState lifecycle method ran!');
        return {secondsElapsed: Number(this.props.startTime) || 0};
    },
    tick: function() {
        console.log(ReactDOM.findDOMNode(this));
        if(this.state.secondsElapsed === 65){
            ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
            return;
        }
        this.setState({secondsElapsed: this.state.secondsElapsed + 1});
    },
    componentDidMount: function() {
        console.log('componentDidMount lifecycle method ran!');
        this.interval = setInterval(this.tick, 1000);
    },
    componentWillUnmount: function() {
        console.log('componentWillUnmount lifecycle method ran!');
        clearInterval(this.interval);
    },
    render: function() {
        return (<div>Seconds Elapsed: {this.state.secondsElapsed}</div>);
    }
});

ReactDOM.render(< Timer startTime = "60" / >, app);

방법은 세 가지 범주(마운팅, 업데이트 및 마운트 해제 단계)로 나눌 수 있습니다.
아래에는 각 범주에 대한 표와 포함하는 수명 주기 메서드가 나와 있습니다.

장착 단계(구성 요소 수명에 한 번 발생):

The first phase of the React Component life cycle is the Birth/Mounting phase. This is where we start initialization of the Component. At this phase, the Component's props and state are defined and configured. The Component and all its children are mounted on to the Native UI Stack (DOM, UIView, etc.). Finally, we can do post-processing if required. The Birth/Mounting phase only occurs once.

업데이트 단계(구성 요소 수명 동안 계속해서 발생):

The next phase of the life cycle is the Growth/Update phase. In this phase, we get new props, change state, handle user interactions and communicate with the component hierarchy. This is where we spend most of our time in the Component's life. Unlike Birth or Death, we repeat this phase over and over.

*마운트 해제 단계(구성 요소 수명에 한 번 발생): *

The final phase of the life cycle is the Death/Unmount phase. This phase occurs when a component instance is unmounted from the Native UI. This can occur when the user navigates away, the UI page changes, a component is hidden (like a drawer), etc. Death occurs once and readies the Component for Garbage Collection.

참조 :
EnlightenmentTypeScript에 반응하는 방법