리액트 핵심만 훑어보자 #7 리액트 컴포넌트의 생명주기

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

 

리액트 컴포넌트의 생명주기가 뭘까?

• 리액트 컴포넌트가 생성되고, 다시 렌더링 되고, 화면에서 사라지기까지의 과정을 말한다.

 

자세히 알아보자

• 리액트 컴포넌트의 생명주기는 크게 3가지로 나뉜다.

마운트

• 컴포넌트의 생성자가 실행되는 과정이다.
• 사람에 비유하면 출생에 해당한다.
• 생성자에서는 상태를 정의하고 컴포넌트가 렌더링 된다.
• 이때 클래스 컴포넌트에서는 componentDidMount() 함수가 호출된다.
  
  
• 참고로 이번 실습에서는 클래스 컴포넌트를 다룰 것이다.
• 하지만 이미 언급했듯 실제로는 함수 컴포넌트를 대부분 사용할 것이므로 가볍게 실습해 보면 좋을 것 같다.
   

업데이트

• 컴포넌트의 props가 변경되거나 상태가 변경될 경우, 또는 forceUpdate() 함수를 통해 강제로 업데이트될 때 컴포넌트가 다시 렌더링 된다.
• 이때 클래스 컴포넌트에서는 componentDidUpdate() 함수가 호출된다.
   

언마운트

• 현재 컴포넌트를 더 이상 화면에 표시하지 않을 때 언마운트 된다고 할 수 있다.
• 사람에 비유하면 사망에 해당한다.
• 언마운트 시키려면 현재 렌더링 하고 있는 컴포넌트의 상태 값을 빈 값으로 수정해주어야 한다.
• 이때 클래스 컴포넌트에서는 componentWillUnmount() 함수가 호출된다.

 

개념은 여기까지, 실습을 해보자

class Alert extends React.Component {
    style = {
        wrapper : {
            width : 800,
            height : 130,
            border : "1px solid black",
            borderRadius : 25
        }
    };

    constructor(props) {
        super(props);

        this.state = {};
    }

    componentDidMount() {
        console.log(`${this.props.id} componentDidMount() called!`);
    }

    componentDidUpdate() {
        console.log(`${this.props.id} componentDidUpdate() called!`);
    }

    componentWillUnmount() {
        console.log(`${this.props.id} componentWillUnmount() called!`);
    }

    render() {
        return (
            <div style={this.style.wrapper}>
                <span>{this.props.message}</span>
            </div>
        );
    }
}

export default Alert;

• Alert.jsx 파일을 작성해 보자.
• 스타일은 책에 포함된 내용이었는데, 저번 포스팅과 마찬가지로 우리가 css를 공부하는 것은 아니기 때문에 필요가 없다면 생략해도 좋다. 
• 먼저 생성자에서는 props를 React.Component 클래스에 전달해 주고, 빈 값의 상태를 선언해 준다. 
• 그리고 생명주기 함수들을 오버라이딩 해준다.
  위에서 언급했듯 생명주기 함수에는 componentDidMount(), componentDidUpdate(), componentWillUnmount()가 있다.
• 마지막으로 렌더링 할 내용을 반환해 주면 된다.
• 우리가 작성한 Alert 컴포넌트는 곧 작성하게 될 AlertList 컴포넌트에서 props를 전달하며 호출하게 될 것이다.

 

const reservedAlerts = [
    {
        id : 1,
        message : "사이트에 글이 업로드 되었습니다."
    }, 
    {
        id : 2,
        message : "점심 식사 시간입니다."
    },
    {
        id : 3,
        message : "곧 회의가 시작됩니다."
    }
];

var timer;

class AlertList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            alerts : []
        };
    }

    componentDidMount() {
        const { alerts } = this.state;
        timer = setInterval(() => {
            if (alerts.length < reservedAlerts.length) {
                const index = alerts.length;
                alerts.push(reservedAlerts[index]);
                this.setState({
                    alerts : alerts
                });
            } else {
                this.setState({
                    alerts: []
                });
                clearInterval(timer);
            }
        }, 1000);
    }

    componentWillUnmount() {
        if (timer) {
            clearInterval(timer);
        }
    }

    render() {
        return (
            <div>
                {this.state.alerts.map((alert) => {
                    return <Alert 
                                key={alert.id}
                                id={alert.id}
                                message={alert.message}/>;
                })}
            </div>
        );
    }
}

export default AlertList;

• AlertList.jsx는 하드 코딩된 알림을 순차적으로 렌더링 해주고, 알림이 모두 렌더링 되었을 경우 화면을 비운다.
• 먼저, 생성자에서는 props를 React.Component 클래스에 전달해 주고, alerts 상태를 선언해 준다. 
• 해당 컴포넌트가 마운트 될 때 1초마다 갱신된 알림 목록을 상태 값으로 변경해 준다.
• 상태를 변경함으로써 rendor() 함수가 실행되며 렌더링 되는 것이다.
• 하드 코딩된 알림 목록이 모두 렌더링 되었을 때, 상태 값에 빈 값을 넣어서 화면을 비워준다.
• 해당 컴포넌트가 언마운트 될 때 타이머의 인터벌 함수를 중단한다.

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import AlertList from './component/AlertList';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <AlertList />
);

reportWebVitals();

• index.js에 AlertList 컴포넌트를 추가하자.
• 또, 이번 실습에서는 <React.StrictMode></React.StrictMode> 코드를 제거해주어야 한다.
• 해당 코드는 사이드 이펙트를 감지하기 위해 일부 생명주기 메서드를 두 번 호출하는데, 개발 환경에서만 동작하고 프로덕션 환경에서는 동작하지 않는다고 한다.

추후 StrictMode에 대해서도 정리하여 포스팅을 올려볼까 생각 중이다.

• 다시 본론으로 돌아와서, 작성된 코드에 문제가 없다면 이제 프로그램을 실행해 보고 결과를 확인하면 된다.

 

결과를 확인해 보자

• 위에서부터 순차적으로 알림이 추가되고, 마지막에 화면이 비워지면 실습을 성공한 것이다.

 

• 콘솔창에는 위 이미지처럼 출력된다. 

 

마치며

• 함수 컴포넌트에서는 훅을 이용해서 생명주기 함수가 호출된다.

클래스 컴포넌트를 쓰지는 않지만 리액트 컴포넌트의 생명주기 함수를 이해하기 위해서 꼭 실습을 해보는 것을 추천한다. 👀 

 

이미지 출처

[React] Component 를 사용하는 기본적인 방법

소플 - soaple.io