[새싹x코딩온] 웹 개발자 부트캠프 과정 12주차 회고(2) | 리액트 생명주기

1. 이번 목표:
    생명주기(라이프사이클)에 대해 알아보자

 

2. 배운 내용 요약

리액트(React)는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트는 특정 생명주기(Lifecycle)를 따른다.
이 생명주기를 이해하면, 컴포넌트가 화면에 추가되거나 제거될 때, 그리고 상태가 변경될 때 어떤 일이 일어나는지 알 수 있다.

마운트, 언마운트, 렌더링

마운트(Mount)

컴포넌트가 처음으로 화면에 추가되는 시점.

• 컴포넌트가 DOM에 추가되고, 화면에 나타남.
• 초기화 작업(데이터 가져오기, 이벤트 리스너 등록 등)을 주로 수행.

언마운트(Unmount)

컴포넌트가 화면에서 제거되는 시점.

• 컴포넌트가 DOM에서 삭제되고, 더 이상 화면에 표시되지 않음.
• 타이머 정리, 이벤트 리스너 제거, 네트워크 요청 취소 등의 작업을 수행.

렌더링(Rendering)

컴포넌트의 UI가 화면에 그려지는 과정.

• 상태(State)나 속성(Props)이 변경될 때마다 렌더링이 발생.
• React는 변경된 부분만 효율적으로 업데이트.

개념	설명	발생시점	메서드/훅
마운트	컴포넌트가 DOM에 추가됨	처음 화면에 나타날 때	componentDidMount(), useEffect(( ) => { }, [ ])
언마운트	컴포넌트가 DOM에서 제거됨	화면에서 사라질 때	componentWillUnmount(), useEffect 클린업 함수
렌더링	UI가 업데이트되는 과정	상태/속성이 변경될 때	componentDidUpdate(), 상태변경시 자동실행

 

클래스형 컴포넌트의 생명주기 메서드

클래스형 컴포넌트에서는 리액트의 생명주기 메서드를 사용하여 특정 시점에 코드를 실행할 수 있다.

 

주요 생명주기 메서드

메서드	호출	발생시점
componentDidMount()	컴포넌트가 마운트된 직후	마운트 후 1회
componentDidUpdate()	상태/속성이 변경돼 업데이트 된 직후	렌더링 후
componentWillUnmount()	컴포넌트가 언마운트되기 직전	언마운트 직전

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    console.log('🔵 마운트 완료!');
  }

  componentDidUpdate() {
    console.log('🖌️ 업데이트 완료!');
  }

  componentWillUnmount() {
    console.log('🔴 언마운트!');
  }

  render() {
    return <p>안녕하세요, 리액트!</p>;
  }
}

export default MyComponent;

 

 

함수형 컴포넌트의 생명주기 훅(Hook)

함수형 컴포넌트에서는 useEffect 훅을 사용하여 생명주기 메서드를 구현할 수 있다.

 

useEffect(() => {
  // 이 부분은 마운트 및 업데이트 시 실행됨
  return () => {
    // 이 부분은 언마운트 시 실행됨
  };
}, [의존성]);

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

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

  useEffect(() => {
    console.log('🔵 마운트 완료 및 업데이트!');
    return () => {
      console.log('🔴 언마운트!');
    };
  }, []);

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

export default MyComponent;

 

 

 

 

3. 회고

리액트 생명주기를 배울 때 컴포넌트가 생성되고 소멸되기까지의 과정이 체계적으로 관리되고 있다는 것을 알고 있었지만, 이전에 리액트를 배울 때 나는 클래스 컴포넌트의 사용을 지양하고, 함수형 컴포넌트만을 사용했기에 useEffect 훅으로 이를 관리하며 특정 시점에서 원하는 작업을 수행했었다. 이번 강의에서 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 생명주기 메서드를 처음 접하게 되었다.
아무래도 요즘은 클래스 컴포넌트보다 함수형 컴포넌트를 더 많이 쓰는 추세인 만큼 생명주기 메서드를 쓸 일은 많이 없겠지만 새로운 지식을 얻게 되어 재밌었다.