[React] 생명주기(Lifecycle), 마운트 (Mount), 언마운트 (Unmount)

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.생명주기(Lifecycle)

컴포넌트가 생성되고, 업데이트되며, 제거되는 과정을 설명하는 개념입니다.

 

 

 

1-1.마운트 (Mount)

마운트는 컴포넌트가 처음으로 DOM에 삽입될 때 발생합니다. 이 과정은 컴포넌트가 생성되고 렌더링되어 화면에 표시되기까지의 일련의 작업을 포함합니다.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타났습니다.');

    // 반환 함수는 언마운트 시 호출됩니다.
    return () => {
      console.log('컴포넌트가 화면에서 사라집니다.');
    };
  }, []); // 빈 배열: 마운트 시에만 실행됨

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

export default MyComponent;

 

 

 

1-2.업데이트 (Update)

컴포넌트의 상태나 속성이 변경되어 리렌더링이 필요할 때 발생합니다. 컴포넌트가 다시 렌더링되어 UI가 변경됩니다.

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

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

  useEffect(() => {
    console.log('컴포넌트가 업데이트되었습니다. 현재 카운트:', count);
  }, [count]); // count가 변경될 때마다 실행됨

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

export default MyComponent;

 

 

 

 

1-3.언마운트 (Unmount)

컴포넌트가 DOM에서 제거될 때 발생합니다. 이 과정은 컴포넌트가 더 이상 필요하지 않거나 조건에 따라 제거될 때 수행됩니다.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 마운트 시에 실행됨
    console.log('컴포넌트가 화면에 나타났습니다.');

    // 반환 함수는 언마운트 시 호출됨
    return () => {
      console.log('컴포넌트가 화면에서 사라집니다.');
    };
  }, []); // 빈 배열: 마운트 시에만 실행됨

  return <div>안녕, 리액트!</div>;
}

export default MyComponent;