[React] 함수형 컴포넌트 Lifecycle과 렌더링 과정

함수형 컴포넌트 Lifecycle 렌더링 과정에 대해 정리해 보려구 해요

React의 useEffect 훅을 활용하여

컴포넌트가 마운트(mount), 업데이트(update), 언마운트(unmount) 될 때 실행되는 코드를 정의할 수 있어요.

 

---

 

[콘솔 창]

 

1. 컴포넌트가 처음 렌더링 될 때 (Mounting)

useEffect(() => {...}, [])는 의존성 배열이 빈 배열 ([]) 이므로,

컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.

---

2. 상태 변경으로 컴포넌트가 업데이트될 때 (Update)

컴포넌트의 상태(state)가 변경되면 리렌더링(Rerendering) 이 발생합니다.

 

✅ 리렌더링이란?
상태(state) 또는 속성(props)이 변경되면 화면이 다시 그려지는 과정을 의미합니다.

 

상태(value)가 변경되면, 이전 렌더링에서 실행된 useEffect의 클린업(cleanup) 함수가 먼저 실행된 후,

새로운 useEffect가 실행됩니다.

즉, useEffect(() => {...}, [value])의 이전 effect가 정리된 후 새 effect가 실행됩니다.

---

3. 컴포넌트가 사라질 때 (Unmount)

컴포넌트가 언마운트되면, 모든 useEffect의 cleanup 함수가 실행됩니다.

✔ useEffect(() => {...}, [])의 cleanup 함수 실행
✔ useEffect(() => {...}, [value])의 cleanup 함수 실행

---

반응형

이렇게 해서 함수형 컴포넌트의 라이프사이클(Lifecycle) 과정을 정리해 보았습니다.
React의 렌더링 흐름을 이해하는 데 도움이 되길 바랍니다!