React 18 useDeferredValue 심화: 검색 자동완성에서 디바운싱을 제거하는 이유

리액트(React)를 공부하다 보면 "생명주기(Lifecycle)"라는 거창한 단어를 마주하게 됩니다.
코드에 무슨 생명이 있냐고 반문하실 수도 있겠지만, 리액트 컴포넌트는 실제로 태어나고, 변화하고, 사라지는 과정을 겪습니다.
이 흐름을 이해하지 못하면 화면이 제때 갱신되지 않거나, 메모리 누수가 발생하는 등 원인을 알 수 없는 버그에 시달리게 됩니다.
오늘은 복잡한 코드는 잠시 내려놓고, 사람의 인생에 비유하여 이 개념을 아주 쉽게 정복해 보겠습니다.

💡 오늘의 목표

1. 생명주기의 3단계(Mount, Update, Unmount) 이해하기
2. 각 단계가 사람의 인생과 어떻게 닮았는지 비교하기
3. 실무 핵심 훅인 useEffect로 생명주기 다루기

---

🌱 1. 컴포넌트의 일생: 3단 변화

사람이 태어나서(출생), 성장하며 변화하고(인생), 결국 세상을 떠나듯이(사망), 리액트 컴포넌트도 똑같은 3단계를 거칩니다.
개발 용어로는 이것을 Mount(마운트), Update(업데이트), Unmount(언마운트)라고 부릅니다.

👶 1단계: Mount (탄생)

컴포넌트가 브라우저 화면에 처음 나타나는 순간입니다.
DOM이 생성되고 웹 페이지에 렌더링 됩니다.
예: 사용자가 페이지에 처음 접속했을 때.

👦 2단계: Update (변화)

컴포넌트의 상태(State)나 부모로부터 받은 값(Props)이 바뀌는 순간입니다.
화면이 갱신(Re-rendering) 되는 과정입니다.
예: 버튼을 눌러 숫자가 1에서 2로 바뀔 때.

👻 3단계: Unmount (죽음)

컴포넌트가 더 이상 필요 없어서 화면에서 사라지는 순간입니다.
메모리에서 제거됩니다.
예: 다른 페이지로 이동하거나 팝업창을 닫았을 때.

---

🛠️ 2. useEffect로 생명주기 조작하기

과거(클래스형 컴포넌트)에는 각 단계별로 복잡한 함수를 따로 썼지만, 요즘(함수형 컴포넌트)은 useEffect라는 훅(Hook) 하나로 해결합니다.
초보 개발자가 가장 많이 헷갈려하는 부분이니 아래 코드를 주의 깊게 봐주세요.

💻 상황별 코드 패턴

1. 마운트 시 (처음 한 번만 실행)

API 호출 등 초기화 작업에 사용합니다.

useEffect(() => {
  console.log("태어났습니다!");
}, []); // 빈 배열이 핵심!

2. 업데이트 시 (특정 값이 변할 때마다)

특정 데이터가 바뀔 때마다 실행하고 싶을 때 사용합니다.

useEffect(() => {
  console.log("나이가 " + age + "살로 변했습니다.");
}, [age]); // age가 변할 때만 실행

3. 언마운트 시 (사라질 때)

타이머 종료나 이벤트 리스너 제거 등 정리(Cleanup) 작업에 씁니다.

useEffect(() => {
  return () => {
    console.log("안녕히 계세요...");
  };
}, []);

---

⚠️ 3. 초보자가 자주 하는 실수

생명주기를 다룰 때 가장 흔한 실수는 의존성 배열(Dependency Array)을 잘못 설정하는 것입니다.
useEffect의 두 번째 인자인 대괄호 []를 비워두지 않고 생략해 버리면 어떻게 될까요?

구분	동작 방식	결과
[] (빈 배열)	최초 1회만 실행	정상 (초기화용)
[value]	value가 변할 때 실행	정상 (감지용)
생략함	모든 렌더링마다 실행	무한 루프 위험

배열을 아예 생략하면 컴포넌트가 1픽셀만 바뀌어도 함수가 계속 실행되어 컴퓨터가 멈출 수도 있으니 꼭 주의해야 합니다.

---

🎯 마무리하며

오늘은 리액트 컴포넌트의 탄생(Mount), 변화(Update), 죽음(Unmount)에 대해 알아보았습니다.
처음에는 이 개념이 낯설게 느껴질 수 있지만, "모든 것은 태어나고 변하고 사라진다"는 자연의 섭리와 같다고 생각하면 훨씬 이해하기 쉽습니다.
이 흐름을 자유자재로 다룰 수 있게 되면, 여러분은 비로소 리액트의 진정한 힘을 끌어낼 수 있는 개발자가 될 것입니다.

🚀 실천 가이드: 직접 확인해보기

• 간단한 카운터 앱을 만들고 useEffect 안에 console.log를 찍어보세요.
  
• 버튼을 누를 때마다 콘솔 창에 어떤 메시지가 뜨는지 순서대로 관찰해 보세요.
  
• 개발자 도구(F12)의 Console 탭은 최고의 학습 도구입니다.