React component life cycle

 

리액트에서 컴포넌트는 마치 생명체처럼 몇가지 단계를 거쳐서 생성되고 사라지기도 합니다.
이런 표현을 보통 생명주기(Lifecycle)라고 부르며, 이번에는 세 가지 주요 단계 생명주기 내용을 기록합니다.

 

 

 

 

목차

• 마운트(Mount)
• 업데이트(Update)
• 언마운트(Unmount)
• 레퍼런스 링크

 

 

마운트(Mount)

 

 

컴포넌트가 처음 화면에 나타나는 순간을 말합니다.
이때 초기 렌더링이 일어나고, 초기 설정이 이루어집니다.

function Welcome() {
  useEffect(() => {
    // 컴포넌트가 처음 나타날 때 실행됩니다.
    console.log('컴포넌트가 태어났어요!');
  }, []); // 빈 의존성 배열

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

 

 

 

업데이트(Update)

 

 

상태나 props가 변경되어 컴포넌트가 다시 그려지는 단계입니다.

 

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

  // count가 변경될 때마다 실행됩니다.
  useEffect(() => {
    console.log(`현재 카운트: ${count}`);
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭: {count}번
    </button>
  );
}

 

 

 

언마운트(Unmount)

 

 

컴포넌트가 화면에서 완전히 사라지는 (소멸의) 마지막 단계입니다.
이때 중요한 것은 "Cleanup" 입니다.
정리 작업인 Cleanup 은 메모리 누수를 방지하고, 불필요한 리소스를 해제합니다.
(ex : 이벤트 리스너 해제, 네트워크 연결 종료 등등..)

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // 타이머 시작
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // 컴포넌트 unmount 시 타이머 정리
    return () => {
      clearInterval(interval);
      console.log('타이머가 멈췄습니다.');
    };
  }, []); // 빈 의존성 배열: 컴포넌트 마운트 시 한 번만 실행

  return <div>경과 시간: {seconds}초</div>;
}

레퍼런스 링크

 

https://react.dev/learn/escape-hatches

Escape Hatches – React

 

https://react.dev/learn/lifecycle-of-reactive-effects

Lifecycle of Reactive Effects – React