[React🩵] useEffect와 components lifecycle (컴포넌트의 생명주기)

01.  컴포넌트의 생명주기

탄생 → 변화 → 소멸 의 과정을 거친다

useEffect를 사용하면 생명주기 단계마다 특정 작업을 실행할 수 있다

 

• 마운트(Mount): 컴포넌트가 화면에 처음 나타날 때(탄생)
• 업데이트(Update): 상태(state)나 props가 변경되어 다시 그려질 때(리랜더링 포함)
• 언마운트(Unmount): 컴포넌트가 화면에서 사라질 때(제거)

 

 

02.  마운트(Mount)

• 컴포넌트가 처음 화면에 랜더링 될 때 발생하는 과정
• HTML요소가 DOM에 추가된다

 

☑️  마운트 시 실행되는 것들

• useEffect의 첫번째 실행
• console.log()가 있으면 처음 한 번 출력됨
• API요청(데이터 불러오기) 같은 초기 작업 수행

import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    console.log("✅ 마운트됨");
  }, []);

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

 

 

 

 

03.  리랜더링(Re-rendering)

• 컴포넌트가 다시 그려지는 과정
• 상태(state)나 props가 변경될 때 발생한다

 

☑️  리랜더링이 발생하는 시점

• useState()로 관리하는 값이 변경될 때
• 부모 컴포넌트에서 전달받은 props가 변경될 때
• usesEffect()에서 특정 값이 바뀔 때 실행되도록 설정 *하단 예제 참고

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log(`🔄 리렌더링`);
  }, [count]); // 👈 count가 변경될 때마다 실행됨

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

📌 count 변경 시 마다 useEffect가 실행되며 리랜더링 됨

 

 

 

 

04.  언마운트(Unmount)

• 컴포넌트가 화면에서 사라질 때 발생하는 과정
• 컴포넌트가 사라질 때 정리 작업이 필요할 수 있다(cleanup) ex. 이벤트 리스너 해제
• useEffect의 return 함수가 실행된다

import { useState, useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    console.log("✅ 마운트됨! (처음 실행)");

    return () => {
      console.log("❌ 언마운트됨! (컴포넌트 제거)");
    };
  }, []);

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

function App() {
  const [show, setShow] = useState(true);

  return (
    <div>
      {show && <MyComponent />}
      <button onClick={() => setShow(false)}>컴포넌트 숨기기</button>
    </div>
  );
}

 

 

 

👩🏻‍💻  정리!!

마운트 (Mount)	컴포넌트가 처음 화면에 나타날 때 (useEffect(() => {...}, []))
리렌더링 (Re-rendering)	state나 props가 변경될 때 다시 렌더링됨
언마운트 (Unmount)	컴포넌트가 화면에서 사라질 때 (useEffect의 return 함수 실행)
useEffect 실행 방식	마운트 시 실행 ([]), 특정 값 변경 시 실행 ([value]), 언마운트 시 실행 (return () => {...})