[React] React Hooks를 사용한 componentDidMount, componentDidUpdate, componentWillUnmount 구현

dhbyun·2021년 8월 12일

React js

목록 보기

5/11

Function Component을 사용한 React에서 Class Component의 생명주기와 비슷하게 구성을 하고 싶은 경우들에 React Hooks를 사용하여 구현하게 됩니다.
Class Component처럼 뚜렷하게 componentDidMount, componentDidUpdate, componentWillUnmount를 function Component에서 구현하기 위해서는 React Hooks를 통해 구현을 해야합니다.

Class Component와 Function Component를 비교하며 React Hooks의 useEffect() 함수를 사용하여 위 3가지의 대표적인 생명주기함수를 구현해보겠습니다.

LifeCycle

Class Component LifeCycle

React Class Component LifeCycle

Class Component에서는 생명주기함수를 활용하여 구현 가능

Function Component LifeCycle(with React Hooks)

React Hooks Lifecycle

Function Component에서는 생명주기함수를 구현하기 위해서는 React Hooks를 사용하여 구현 가능

Code

componentDidMount 구현

Class Component componentDidMount

    componentDidMount() {
        console.log('componentDidMount[Class]');
    }

Function Component componentDidMount(with React Hooks)

    useEffect(() => {
        console.log('componentDidMount[Function]');
    }, []);

useEffect() 함수의 의존성 배열 deps 부분을 공백으로 두면 구현 가능

componentDidUpdate 구현

Class Component componentDidUpdate

    componentDidUpdate(prevProps, prevState) {
        console.log('componentDidUpdate[Class]');
    }

Function Component componentDidUpdate(with React Hooks)

    const mounted = useRef(false);
    
    useEffect(() => {
        if (!mounted.current) {
            mounted.current = true;
        } else {
            console.log('componentDidUpdate[Function]')
        }
    });

useEffect() 함수의 의존성 배열 deps 부분을 지우고, useRef() 함수로 식별값을 선언한 후 if문을 통해 componentDidMount를 넘어가게 만들어서 구현 가능

componentWillUnmount 구현

Class Component componentWillUnmount

    componentWillUnmount() {
        console.log('componentWillUnmount[Class]');
    }

Function Component componentWillUnmount(with React Hooks)

useEffect(() => {
        console.log('componentDidMount[Function]');

        return () => {
            console.log('componentWillUnmount[Function]')
        }
    }, []);

componentDidMount 구현 함수에 return을 사용하여 구현 가능

Testing Code

간단한 숫자 카운팅 코드를 각각 생명주기함수가 언제 실행되는지 확인할 수 있도록 작성했습니다.

App Code

import React, {useState} from 'react';

import CounterClass from "./CounterClass";
import CounterFunction from "./CounterFunction";

function LifeCycleApp(props) {

    const [componentState, setComponentState] = useState('CounterClass');
    const [component, setComponent] = useState(<CounterClass/>);

    const switchComponent = () => {
        if(componentState === 'CounterClass'){
            setComponentState('CounterFunction');
            setComponent(<CounterFunction/>);
        } else {
            setComponentState('CounterClass');
            setComponent(<CounterClass/>);
        }
    }

    return (
        <div>
            <button onClick={switchComponent}>Switch Component</button>
            {component}
        </div>
    );
}

export default LifeCycleApp;

Class Component Code

import React, {Component} from 'react';

class CounterClass extends Component {

    constructor(props) {
        super(props);
        this.state = {
            number: 0
        };
    }

    componentDidMount() {
        console.log('componentDidMount[Class]');
    }

    componentDidUpdate(prevProps, prevState) {
        console.log('componentDidUpdate[Class]');
    }

    componentWillUnmount() {
        console.log('componentWillUnmount[Class]');
    }

    handleIncrease = () => {
        this.setState({
            number: this.state.number + 1
        });
    }

    handleDecrease() {
        this.setState({
            number: this.state.number - 1
        });
    }

    render() {
        console.log('render[Class]')
        return (
            <div>
                <h1>Class Counter</h1>
                <div>Value: {this.state.number}</div>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={() => this.handleDecrease()}>-</button>
            </div>
        );
    }
}

export default CounterClass;

Function Component Code

import React, {useState, useEffect, useRef} from 'react';

function CounterFunction(props) {

    const [number, setNumber] = useState(0);

    //componentDidMount with useEffect
    useEffect(() => {
        console.log('componentDidMount[Function]');

        //componentWillUnmount with useEffect
        return () => {
            console.log('componentWillUnmount[Function]')
        }
    }, []);

    //componentDidUpdate with useEffect
    const mounted = useRef(false);
    useEffect(() => {
        if (!mounted.current) {
            mounted.current = true;
        } else {
            console.log('componentDidUpdate[Function]')
        }
    });


    const handleIncrease = () => {
        setNumber(number + 1);
    }

    function handleDecrease() {
        setNumber(number - 1);
    }


    return (
        <div>
            {console.log('render[Function]')}
            <h1>Function Counter</h1>
            <div>Value: {number}</div>
            <button onClick={handleIncrease}>+</button>
            <button onClick={handleDecrease}>-</button>
        </div>
    );
}

export default CounterFunction;