react lifecycle method 정리 with react-native -1 (componentDidMount, shouldComponentUpdate, componentDidUpdate, componentWillUnmount)

* 컴포넌트가 생성될때 다음과 같은 순서로 함수가 호출됩니다.

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

우리는 component관련된 method에 대해 알아볼것입니다.

1. componentDidMount lifecycle method

- 컴포넌트가 첫 마운트된 직후 (react component가 생성된후), 즉 트리에 삽입된 직후에 호출됩니다.  대부분 ajax 같은 외부에서 데이터를 가져올때 사용한다.

export default class MyComponent extends Component{
    constructor() {
        super();
        this.state = {loading:true,data:{}}
    }

    componentDidMount() {
        setTimeout(() =>{
            console.log("setTimeout");
            this.setState({
                loading:false,
                data:{name:"Nader Dabit",age:35}
            })
        },4000)
        console.log("componentDidMount");
    }


    render() {
        console.log("render");
            if(this.state.loading){
                return <Text>Loading</Text>
            }
            const {name,age} = this.state.data;
        return(
            <View>
                <Text
                >
                    Name : {name}
                </Text>
                <Text>
                  Age : {age}
                </Text>
            </View>
        )
    }
}

로그는 아래와 같이 찍힌다.
render
componentDidMount
setTimeout
render

2. shouldComponentUpdate lifecycle method

-  render update 전에 호출됩니다. 호출시에 true,false를 반환하여 view를 업데이트 할지 안할지 결정하는 함수입니다. 예) 반환값이 false 일경우 뷰 렌더링 x , true 일경우 뷰 렌더링 o

 

export default class MyComponent extends Component{
    constructor() {
        super();
        this.state = {loading:true,data:{}}
    }

    componentDidMount() {
        setTimeout(() =>{
            console.log("setTimeout");
            this.setState({
                loading:false,
                data:{name:"Nader Dabit",age:35}
            })
        },4000)
        console.log("componentDidMount");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("shouldComponentUpdate")
        if(nextProps.name == this.props.name) {
            return true
        }
        return false
    }

    render() {
        console.log("render");
            if(this.state.loading){
                return <Text>Loading</Text>
            }
            const {name,age} = this.state.data;
        return(
            <View>
                <Text
                >
                    Name : {name}
                </Text>
                <Text>
                  Age : {age}
                </Text>
            </View>
        )
    }
}

로그는 아래와 같다.
render
componentDidMount
setTimeout
shouldComponentUpdate
render

3.componentDidUpdate lifecycle method

 - componentDidmount가 끝난후 다시한번 rerender가 일어날경우 호출 한다. 위 예에서 settimeout을 통해 state를 변경하고 두번째 리렌더링이 발생하며, 그후에 호출한다고 생각하면 된다.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {Component} from "react";


export default class MyComponent extends Component{
    constructor() {
        super();
        this.state = {loading:true,data:{}}
    }

    componentDidMount() {
        setTimeout(() =>{
            console.log("setTimeout");
            this.setState({
                loading:false,
                data:{name:"Nader Dabit",age:35}
            })
        },4000)
        console.log("componentDidMount");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("shouldComponentUpdate")
        if(nextProps.name == this.props.name) {
            return true
        }
        return false
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("componentDidUpdate")
    }

    render() {
        console.log("render");
            if(this.state.loading){
                return <Text>Loading</Text>
            }
            const {name,age} = this.state.data;
        return(
            <View>
                <Text
                >
                    Name : {name}
                </Text>
                <Text>
                  Age : {age}
                </Text>
            </View>
        )
    }
}

로그는 아래와 같다.
render
componentDidMount
setTimeout
shouldComponentUpdate
render
componentDidUpdate

 

4. componentWillUnmount lifecycle method

-구성 요소가 마운트 해제되고 소멸되기 직전에 호출됩니다. 이 방법에서 타이머 무효화, 네트워크 요청 취소 또는 에서 생성된 구독 정리와 같은 필요한 정리를 수행합니다

 

class ComponentOne extends Component {

    // Defining the componentWillUnmount method
    componentWillUnmount() {
        console.log('The component is going to be unmounted');
    }

    render() {
        return (<Text>Loadding!</Text>);
    }
}

export default class MyComponent extends Component{
    constructor() {
        super();
        this.state = {loading:true,data:{}}
    }

    componentDidMount() {
        setTimeout(() =>{
            console.log("setTimeout");
            this.setState({
                loading:false,
                data:{name:"Nader Dabit",age:35}
            })
        },4000)
        console.log("componentDidMount");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("shouldComponentUpdate")
        if(nextProps.name == this.props.name) {
            return true
        }
        return false
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("componentDidUpdate")
    }

    componentWillUnmount() {
        console.log("componentWillUnmount")
    }

    render() {
        console.log("render");
            if(this.state.loading){
                return <ComponentOne/>
            }
            const {name,age} = this.state.data;
        return(
            <View>
                <Text
                >
                    Name : {name}
                </Text>
                <Text >
                  Age : {age}
                </Text>
            </View>
        )
    }
}

log는 아래와 같습니다.

render
componentWillUnmount
componentDidMount
setTimeout
shouldComponentUpdate
render
The component is going to be unmounted
componentDidUpdate