React 컴포넌트의 생명주기(Lifecycle) 이해하기

React에서 컴포넌트의 생명주기(Lifecycle)는 컴포넌트가 생성되고 소멸될 때 일어나는 일련의 단계를 의미합니다. 이러한 생명주기 메서드를 이해하면 컴포넌트의 동작을 효율적으로 제어할 수 있습니다. 이 글에서는 React 컴포넌트의 생명주기 메서드와 각 단계에서 수행되는 작업에 대해 알아보겠습니다.

 

생명주기 메서드 소개: React 컴포넌트의 생명주기는 크게 세 가지 단계로 나눌 수 있습니다. 마운트(Mount), 갱신(Update), 언마운트(Unmount) 단계에서 각각 다양한 생명주기 메서드가 호출됩니다.

 

마운트(Mount) 단계:

• constructor(): 컴포넌트가 생성될 때 호출되는 메서드로, 초기 상태를 설정할 때 주로 사용됩니다.
• componentDidMount(): 컴포넌트가 DOM에 삽입된 후 호출되는 메서드로, 외부 데이터를 불러오거나 초기화 작업을 수행할 때 사용됩니다.

갱신(Update) 단계:

• componentDidUpdate(prevProps, prevState): 컴포넌트가 갱신된 후 호출되는 메서드로, 이전 프로퍼티와 이전 상태에 접근하여 변경 사항을 처리할 때 사용됩니다.

언마운트(Unmount) 단계:

• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 전에 호출되는 메서드로, 리소스 해제나 정리 작업을 수행할 때 사용됩니다.

728x90

생명주기 메서드 활용 예시:

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

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

    componentDidUpdate(prevProps, prevState) {
        if (this.state.count !== prevState.count) {
            console.log('상태가 변경되었습니다.');
        }
    }

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

    render() {
        return <div>{this.state.count}</div>;
    }
}

 

React 컴포넌트의 생명주기 메서드를 이해하면 컴포넌트의 동작을 더욱 효율적으로 제어할 수 있습니다.

반응형