[React] 생명 주기

📚 컴포넌트의 생명 주기란 무엇인가요?

리액트 컴포넌트는 탄생에서부터 소멸까지 생명 주기(lifecycle)를 가지고 있어요. 이를 컴포넌트 생명 주기라고 불러요. 생명 주기 메서드는 컴포넌트가 어떻게 생성되고, 업데이트되며, 제거되는지를 정의해주는 메서드들이에요. 리액트에서는 클래스형 컴포넌트에서 주로 생명 주기 메서드를 사용하며, 함수형 컴포넌트에서는 주로 훅(Hooks)을 사용해 동일한 동작을 구현할 수 있어요.

 

비유를 들자면, 컴포넌트의 생명 주기는 사람이 태어나고 자라고 결국 생을 마치는 과정과 비슷해요. 컴포넌트는 생성되고, 사용자 상호작용이나 데이터 변경에 따라 업데이트되며, 더 이상 필요하지 않으면 소멸되죠. 이 모든 과정에서 특정 시점마다 실행되는 메서드나 동작을 생명 주기 메서드라고 해요.

---

🖥️ 컴포넌트의 생명 주기 단계

리액트 컴포넌트의 생명 주기는 크게 세 가지 단계로 나눌 수 있어요: 생성(mounting), 업데이트(updating), 제거(unmounting). 각각의 단계에서 호출되는 메서드들을 살펴볼게요.

1. 컴포넌트의 생성 단계 (Mounting)

생성 단계는 컴포넌트가 처음으로 DOM에 추가될 때 발생해요. 이 단계에서 사용되는 주요 생명 주기 메서드는 다음과 같아요:

• constructor(): 컴포넌트가 생성될 때 호출되는 메서드로, 초기 state를 설정하거나 이벤트 핸들러를 바인딩하는 데 사용돼요.
• componentDidMount(): 컴포넌트가 처음 렌더링된 직후에 호출돼요. 이 메서드는 API 요청이나 DOM 조작 등의 작업을 수행할 때 주로 사용돼요.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
        console.log("constructor: 컴포넌트 생성");
    }

    componentDidMount() {
        console.log("componentDidMount: 컴포넌트가 DOM에 추가됨");
    }

    render() {
        return <h1>카운트: {this.state.count}</h1>;
    }
}

constructor 메서드는 컴포넌트가 생성될 때 호출돼요.
componentDidMount는 컴포넌트가 처음 DOM에 추가된 후 호출되어, 보통 비동기 요청이나 타이머 설정 등을 처리하는 데 사용돼요.

2. 컴포넌트의 업데이트 단계 (Updating)

업데이트 단계는 컴포넌트가 상태(state)나 속성(props)의 변화로 인해 다시 렌더링될 때 발생해요. 이 단계에서 주로 사용되는 생명 주기 메서드는:

• shouldComponentUpdate(): 컴포넌트가 다시 렌더링될지 여부를 결정하는 메서드예요. 성능 최적화를 위해, 변경된 내용이 없으면 컴포넌트를 다시 렌더링하지 않게 할 수 있어요.
• componentDidUpdate(): 컴포넌트가 업데이트된 후 호출돼요. 업데이트된 후에 추가 작업을 하거나, 변경된 내용을 기반으로 동작을 처리할 때 사용돼요.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    shouldComponentUpdate(nextProps, nextState) {
        // 카운트가 5 이상이면 업데이트하지 않음
        return nextState.count < 5;
    }

    componentDidUpdate(prevProps, prevState) {
        console.log("componentDidUpdate: 컴포넌트가 업데이트됨");
    }

    render() {
        return (
            <div>
                <h1>카운트: {this.state.count}</h1>
                <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                    증가
                </button>
            </div>
        );
    }
}

shouldComponentUpdate는 컴포넌트가 다시 렌더링되어야 하는지 여부를 결정해요.
여기서는 카운트가 5 이상이면 업데이트를 방지하고 있어요. componentDidUpdate는 컴포넌트가 업데이트된 후 추가 작업을 수행할 때 사용돼요.

3. 컴포넌트의 제거 단계 (Unmounting)

제거 단계는 컴포넌트가 DOM에서 제거될 때 발생해요. 이 단계에서는 componentWillUnmount() 메서드를 사용해요. 주로 리소스 정리 작업을 할 때 사용됩니다.

• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 전에 호출돼요. 타이머나 구독(subscription)을 해제하거나, 리소스를 정리하는 데 사용돼요.

class MyComponent extends React.Component {
    componentWillUnmount() {
        console.log("componentWillUnmount: 컴포넌트가 DOM에서 제거됨");
    }

    render() {
        return <h1>안녕하세요!</h1>;
    }
}

componentWillUnmount는 컴포넌트가 DOM에서 제거되기 전에 호출돼요.
주로 타이머 제거나 이벤트 리스너 해제 등의 정리 작업을 할 때 사용돼요.

---

🤔 클래스형 컴포넌트와 함수형 컴포넌트의 생명 주기 차이점

리액트에서는 클래스형 컴포넌트와 함수형 컴포넌트라는 두 가지 방식으로 컴포넌트를 정의할 수 있어요. 두 방식 모두 리액트의 컴포넌트를 정의하는 데 사용되지만, 생명 주기를 처리하는 방식에 차이가 있어요.

1. 클래스형 컴포넌트의 생명 주기

클래스형 컴포넌트는 리액트 초창기부터 사용된 전통적인 컴포넌트 방식이에요. 이 컴포넌트는 생명 주기 메서드를 통해 컴포넌트의 생성, 업데이트, 제거 단계에서 특정 작업을 수행할 수 있어요. 주요 생명 주기 메서드는 다음과 같아요:

• constructor(): 컴포넌트가 생성될 때 호출돼요. 초기 state 설정이나 props를 바인딩할 때 사용돼요.
• componentDidMount(): 컴포넌트가 처음 렌더링된 직후에 호출돼요.
• shouldComponentUpdate(): 컴포넌트가 업데이트될지 여부를 결정해요.
• componentDidUpdate(): 컴포넌트가 업데이트된 후 호출돼요.
• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출돼요.

클래스형 컴포넌트는 이처럼 명확하게 구분된 생명 주기 메서드를 통해 컴포넌트의 각 단계에서 작업을 처리할 수 있어요.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
        console.log("constructor: 컴포넌트 생성");
    }

    componentDidMount() {
        console.log("componentDidMount: 컴포넌트가 DOM에 추가됨");
    }

    shouldComponentUpdate(nextProps, nextState) {
        return nextState.count < 5;
    }

    componentDidUpdate(prevProps, prevState) {
        console.log("componentDidUpdate: 컴포넌트가 업데이트됨");
    }

    componentWillUnmount() {
        console.log("componentWillUnmount: 컴포넌트가 DOM에서 제거됨");
    }

    render() {
        return (
            <div>
                <h1>카운트: {this.state.count}</h1>
                <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                    증가
                </button>
            </div>
        );
    }
}

이 코드는 컴포넌트의 생성, 업데이트, 제거 단계에서 호출되는 주요 생명 주기 메서드를 보여줘요.
각 메서드는 컴포넌트의 특정 시점에서 작업을 수행할 수 있어요.

2. 함수형 컴포넌트의 생명 주기

함수형 컴포넌트는 리액트 16.8 이후로 도입된 Hooks를 통해 생명 주기를 처리해요. 초기에는 함수형 컴포넌트가 단순히 UI만 반환하는 역할을 했지만, Hooks가 도입되면서 함수형 컴포넌트에서도 상태 관리와 생명 주기 메서드 같은 기능을 사용할 수 있게 되었어요.

• useState: 함수형 컴포넌트에서 state를 관리하는 훅이에요.
• useEffect: 컴포넌트의 생성, 업데이트, 제거 시 특정 작업을 처리하는 훅으로, 생명 주기 메서드의 역할을 대신해요.

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

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

    useEffect(() => {
        console.log("컴포넌트가 마운트되었어요!");

        return () => {
            console.log("컴포넌트가 언마운트될 때 호출됩니다.");
        };
    }, []);

    useEffect(() => {
        console.log("카운트가 업데이트되었어요: ", count);
    }, [count]);

    return (
        <div>
            <h1>카운트: {count}</h1>
            <button onClick={() => setCount(count + 1)}>증가</button>
        </div>
    );
};

useEffect 훅은 함수형 컴포넌트에서 생명 주기를 처리하는 데 사용돼요.
첫 번째 useEffect는 컴포넌트가 생성될 때와 제거될 때 동작하고, 두 번째 useEffect는 카운트가 업데이트될 때 동작해요.

3. 클래스형 컴포넌트와 함수형 컴포넌트의 생명 주기차이점

클래스형 컴포넌트와 함수형 컴포넌트는 생명 주기를 처리하는 방식에서 차이가 있어요.

구분	클래스형 컴포넌트	함수형 컴포넌트
생명 주기 처리	명시적인 생명 주기 메서드를 사용	useEffect와 같은 훅을 사용하여 생명 주기를 처리
상태 관리	this.state와 setState를 사용	useState 훅을 사용하여 상태를 관리
가독성	생명 주기 메서드가 여러 단계로 나뉘어 복잡할 수 있음	한 번의 훅 호출로 컴포넌트의 모든 단계 처리 가능
성능	리액트가 함수형 컴포넌트를 더 최적화하여 성능적으로 유리함	함수형 컴포넌트가 더 가벼운 구조를 가져 성능이 더 좋음

4. 함수형 컴포넌트로의 전환 추세

리액트의 최신 버전에서는 함수형 컴포넌트가 클래스형 컴포넌트보다 더 많이 사용돼요. 그 이유는 다음과 같아요:

• 간결한 코드: 함수형 컴포넌트는 더 간결하고, 생명 주기 처리도 하나의 useEffect로 통합되어 더 직관적이에요.
• 성능 최적화: 리액트는 함수형 컴포넌트를 더 최적화하여 렌더링 성능이 더 뛰어나요.
• Hooks의 유연성: Hooks를 통해 상태 관리, 사이드 이펙트 처리, 컨텍스트 사용 등을 모두 간결하게 처리할 수 있어요.

---

🚨 주의할 점

컴포넌트 생명 주기를 다룰 때 주의해야 할 몇 가지 사항이 있어요.

1. 불필요한 업데이트 방지: 성능 최적화를 위해 shouldComponentUpdate 메서드 또는 React.memo를 사용하여 불필요한 업데이트를 방지할 수 있어요. 불필요한 렌더링은 성능을 저하시킬 수 있으니 주의해야 해요.
2. 정리 작업 필수: componentWillUnmount 또는 useEffect의 클린업 함수를 사용하여 타이머나 이벤트 리스너를 꼭 해제해야 해요. 그렇지 않으면 메모리 누수가 발생할 수 있어요.
3. 함수형 컴포넌트에서의 상태 관리: 함수형 컴포넌트에서는 useEffect 훅을 통해 클래스형 컴포넌트의 생명 주기를 대체할 수 있어요. 하지만, 각 생명 주기에 대응하는 훅의 호출 시점과 동작을 명확하게 이해해야 해요.
4. 함수형 컴포넌트 권장: 리액트 공식 문서에서는 이제 함수형 컴포넌트와 Hooks를 권장하고 있어요. 클래스형 컴포넌트는 기존 코드에서 많이 사용되었지만, 최신 프로젝트에서는 함수형 컴포넌트를 사용하는 것이 더 좋습니다.
5. 컴포넌트의 혼용: 프로젝트에서는 여전히 클래스형 컴포넌트와 함수형 컴포넌트를 혼용하여 사용할 수 있어요. 하지만 가능한 경우, 함수형 컴포넌트로 마이그레이션하는 것이 좋습니다.
6. useEffect의 의존성 배열: 함수형 컴포넌트에서 useEffect를 사용할 때, 의존성 배열을 정확하게 설정해야 해요. 의존성 배열이 없거나, 잘못 설정되면 무한 루프가 발생할 수 있어요.

---

📖 결론

리액트 컴포넌트의 생명 주기는 컴포넌트의 생성, 업데이트, 제거 시점에 따라 호출되는 일련의 메서드들이에요. 이 생명 주기 메서드를 적절히 활용하면 컴포넌트의 성능을 최적화하고, 필요한 작업을 적절한 시점에 처리할 수 있어요. 함수형 컴포넌트에서는 Hooks를 사용해 비슷한 동작을 구현할 수 있어요.

 

생명 주기 메서드는 비동기 작업, 데이터 요청, 리소스 정리 등 여러 상황에서 매우 유용하며, 이를 잘 이해하고 활용하면 리액트 애플리케이션을 더욱 효율적으로 관리할 수 있습니다.

 

리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉘며, 각 방식에 따라 라이프사이클을 처리하는 방식이 다릅니다. 클래스형 컴포넌트는 명확한 라이프사이클 메서드를 제공하지만, 함수형 컴포넌트는 Hooks를 통해 더 간결하고 직관적으로 상태 관리와 라이프사이클 처리를 할 수 있어요.

최근 리액트는 함수형 컴포넌트와 Hooks를 중심으로 발전하고 있으며, 성능 최적화와 간결한 코드 작성이라는 장점 덕분에 더 많이 사용되고 있어요. 기존 코드에서 클래스형 컴포넌트를 사용하더라도, 점차 함수형 컴포넌트로 전환하는 것이 추천됩니다.

---

🔗 추가 정보

• 리액트 컴포넌트의 생명 주기에 대한 더 깊은 이해를 원하신다면, 리액트 공식 문서에서 자세한 정보를 찾아볼 수 있어요.
• useEffect에 대한 포스팅은 여기서 확인할 수 있어요.