🧬 27. React 함수형 컴포넌트의 생명주기 완전 정리 — useEffect로 lifecycle을 이해하자

---

클래스형 컴포넌트를 쓸 땐 생명주기 메서드가 명확했다.

• componentDidMount
• componentDidUpdate
• componentWillUnmount

그런데 함수형 컴포넌트에서는 useEffect, useLayoutEffect, useRef 등이
그 역할을 나눠서 하고 있어서 조금 헷갈릴 수 있다.

이번 글은 React 함수형 컴포넌트의 생명주기 흐름을
클래스형 메서드 기준으로 맵핑해서 정리한 글이다.

---

🔁 생명주기 흐름 요약

(컴포넌트 최초 렌더링)
→ useEffect (Mount 시 실행)
→ 상태 변경 → Re-render
→ useEffect (Update 시 실행)
→ 컴포넌트 언마운트 시 → Clean-up 함수 실행

---

✅ 마운트: 처음 렌더링될 때만 실행

useEffect(() => {
  console.log('처음 렌더링 시 실행됨');
}, []);

📌 이건 클래스형의 componentDidMount와 같다.

• 비동기 API 요청
• 구독 시작
• 초기화 작업

---

✅ 업데이트: 상태나 props가 바뀔 때마다 실행

useEffect(() => {
  console.log('상태가 변경되면 실행됨');
}, [someState]);

📌 클래스형의 componentDidUpdate에 해당한다.

• 특정 상태 변화 감지
• 애니메이션 시작
• 조건부 fetch

---

✅ 언마운트: 컴포넌트가 사라질 때 실행

useEffect(() => {
  return () => {
    console.log('언마운트 시 실행됨');
  };
}, []);

📌 클래스형의 componentWillUnmount와 같다.

• 구독 해제
• 타이머 정리
• 외부 리소스 정리

---

🔍 useRef로 마운트 여부 확인

const isMounted = useRef(false);

useEffect(() => {
  if (isMounted.current) {
    console.log('업데이트입니다!');
  } else {
    isMounted.current = true;
  }
}, [someValue]);

✅ 이 패턴은 최초 렌더링을 제외하고,
그 이후의 업데이트에서만 실행되도록 제어할 수 있다.

---

🧠 생명주기 비교표

클래스형 메서드	함수형 대체 방식
componentDidMount	useEffect(() => {}, [])
componentDidUpdate	useEffect(() => {}, [dep])
componentWillUnmount	useEffect의 return 함수
shouldComponentUpdate	React.memo, useMemo 등

---

✅ 실무 팁

• 복잡한 useEffect는 나눠서 쓰는 게 가독성에 좋다
• useLayoutEffect는 마운트 타이밍이 다르므로 필요한 경우만 사용
• 렌더링 사이클을 디버깅하려면 console.log로 타이밍을 체크하는 게 유용

---

📝 내가 느낀 점

처음에는 useEffect 하나로 모든 걸 처리하니까 직관적이라고 생각했다.
하지만 컴포넌트가 커지니까 "이건 마운트용인가? 업데이트용인가?"
헷갈리는 일이 많아졌고, 그때부터 의식적으로 생명주기처럼 구조를 나누게 됐다.

이제는 useEffect, useRef, React.memo, useCallback 등을
"생명주기를 쪼개서 제어하는 도구"처럼 쓰고 있다.

---

🧬 "생명주기를 이해하면, React의 모든 흐름이 눈에 들어온다."

---