React와 Vue의 라이프사이클 톺어보기

프론트엔드 라이프사이클: React와 Vue에서의 이해와 활용

 

프론트엔드 라이프사이클은 웹 애플리케이션의 생성, 업데이트 및 소멸 과정에서 발생하는 이벤트와 상태 변화를 설명하는 중요한 개념이다. 라이프사이클을 이해함으로써 개발자는 애플리케이션의 성능을 최적화하고, 사용자 경험을 향상시키며, 효율적인 상태 관리를 구현할 수 있다.

 

1. 프론트엔드 라이프사이클의 기본 개념

 

프론트엔드 라이프사이클은 다음과 같은 주요 단계를 포함한다:

 

• 생성(Creation): 애플리케이션이 처음 로드될 때 발생하는 단계. DOM이 생성되고, 초기화 작업이 진행된다.

• 업데이트(Updating): 애플리케이션의 상태가 변경되거나 사용자 상호작용에 따라 UI가 업데이트되는 단계.

• 소멸(Destroying): 애플리케이션이 종료되거나 컴포넌트가 제거될 때 발생하는 단계. 리소스를 해제하고 정리하는 작업이 이루어진다.

 

각 단계는 React와 Vue와 같은 프레임워크에 따라 다르게 구현되지만, 기본적인 흐름은 유사하다.

 

2. React에서의 라이프사이클

 

2.1. 생성(Creation)

 

React에서 컴포넌트가 생성될 때 여러 라이프사이클 메서드가 호출된다. 이 중 componentDidMount는 컴포넌트가 마운트된 후 호출된다.

 

componentDidMount 예제

 

import React, { useEffect } from 'react';



function ExampleComponent() {

    useEffect(() => {

        console.log('컴포넌트가 마운트되었습니다.');

        // API 호출 등 초기화 작업 수행



        return () => {

            console.log('컴포넌트가 언마운트됩니다. 정리 작업 수행.');

        };

    }, []); // 빈 배열을 전달하여 한 번만 실행



    return <div>안녕하세요!</div>;

}

 

2.2. 업데이트(Updating)

 

업데이트 단계에서는 상태가 변경될 때 UI가 리렌더링된다. React는 상태가 변경되면 자동으로 컴포넌트를 리렌더링한다.

 

useState와 useEffect 예제

 

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



function Counter() {

    const [count, setCount] = useState(0);



    useEffect(() => {

        console.log(`Count가 ${count}로 업데이트되었습니다.`);

    }, [count]); // count가 변경될 때마다 실행



    return (

        <div>

            <p>Count: {count}</p>

            <button onClick={() => setCount(count + 1)}>증가</button>

        </div>

    );

}

 

2.3. 소멸(Destroying)

 

컴포넌트가 소멸될 때는 리소스를 해제하고 정리하는 작업이 필요하다. componentWillUnmount 메서드를 사용하여 컴포넌트가 언마운트되기 전에 필요한 작업을 수행할 수 있다.

 

componentWillUnmount 예제

 

import React, { useEffect } from 'react';



function Timer() {

    useEffect(() => {

        const timer = setInterval(() => {

            console.log('타이머 작동 중...');

        }, 1000);



        return () => {

            clearInterval(timer); // 타이머 해제

            console.log('타이머가 해제되었습니다.');

        };

    }, []);



    return <div>타이머 컴포넌트</div>;

}

 

3. Vue (Composition API)에서의 라이프사이클

 

3.1. 생성(Creation)

 

Vue의 Composition API를 사용할 때, 컴포넌트가 생성될 때 여러 라이프사이클 훅이 호출된다. 이 중 onMounted 훅은 컴포넌트가 DOM에 삽입된 후 실행된다.

 

onMounted 예제

 

import { defineComponent, onMounted } from 'vue';



const ExampleComponent = defineComponent({

    setup() {

        onMounted(() => {

            console.log('컴포넌트가 DOM에 마운트되었습니다.');

            // API 호출 등 초기화 작업 수행

        });



        return () => <div>안녕하세요!</div>;

    }

});

 

3.2. 업데이트(Updating)

 

업데이트 단계에서는 상태가 변경될 때 UI가 리렌더링된다. Vue의 반응형 시스템이 작동하며, 상태 변경에 따라 필요한 부분만 업데이트된다.

 

computed 예제

 

import { defineComponent, ref, computed } from 'vue';



const ExampleComponent = defineComponent({

    setup() {

        const count = ref(0);



        const doubledCount = computed(() => {

            return count.value * 2; // count의 두 배 값 계산

        });



        return () => (

            <div>

                <p>Count: {count.value}</p>

                <p>Doubled Count: {doubledCount.value}</p>

                <button onClick={() => count.value++}>증가</button>

            </div>

        );

    }

});

 

3.3. 소멸(Destroying)

 

컴포넌트가 소멸될 때는 리소스를 해제하고 정리하는 작업이 필요하다. onBeforeUnmount 훅을 사용하여 컴포넌트가 언마운트되기 전에 필요한 작업을 수행할 수 있다.

 

onBeforeUnmount 예제

 

import { defineComponent, onBeforeUnmount } from 'vue';



const ExampleComponent = defineComponent({

    setup() {

        onBeforeUnmount(() => {

            console.log('컴포넌트가 소멸됩니다. 리소스를 정리합니다.');

            // 이벤트 리스너 해제 등 정리 작업 수행

        });



        return () => <div>안녕하세요!</div>;

    }

});

 

4. 정리

 

React와 Vue의 라이프사이클은 웹 애플리케이션의 동작 방식을 이해하는 데 중요한 역할을 한다. 생성, 업데이트, 소멸의 각 단계에서 발생하는 이벤트와 작업을 잘 이해하고 활용하면, 더 나은 사용자 경험과 효율적인 코드를 작성할 수 있다.