26:I[536515,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostViewTracker"] 27:I[207142,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostBackButton"] 29:I[569887,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostContentViewer"] 2c:I[948688,["/_next/static/immutable/chunks/1opgw09b2rf0r.js"],"IconMark"] 2a:T325c,

1. Effect 등록 구조

useEffect()가 호출되면 React는 Effect 객체를 하나 생성한다.

이 객체에는 다음 정보가 들어있다:

{
  tag,          // effect 타입 정보 (mount/update 등)
  create,       // useEffect 콜백 함수
  destroy,      // cleanup 함수
  deps,         // 의존성 배열
  next          // 다음 effect를 가리키는 포인터
}

모든 effect 객체들은 순환 연결 리스트(circular linked list)로 연결된다.
즉, 마지막 effect의 next가 다시 첫 번째 effect를 가리킨다.
```
effectA → effectB → effectC ┐
     ↑                     │
     └─────────── ┘
```

2. 실행 시점

useEffect의 실행은 렌더링 이후(commit 이후),
브라우저 paint가 완료된 뒤 비동기적으로 실행된다.
이 타이밍은 flushPassiveEffects() → commitHookEffectListMount() 내부에서 이루어진다.
즉, 렌더링 중에는 등록만 되고, 실행은 나중에(비동기) 일어난다.

3. 순환 연결 리스트를 도는 이유

이유	설명
1	effect cleanup / mount / update 를 반복적으로 순회해야 함
2	head, tail 구분 없이 한 바퀴 돌면 전체 순회 가능
3	effect 추가/삭제 시 구조 관리가 단순함
4	React Fiber 구조와의 호환성 (한 큐에서 여러 effect 처리)

결국 순환 구조로 만들어야 “처음~끝~처음”까지 한 번에 순회 가능해진다.

4. 실제 실행 로직

let firstEffect = fiber.updateQueue.lastEffect.next;
let effect = firstEffect;

do {
  // useEffect(() => {...}) 내부 콜백 실행
  effect.create();

  // 다음 effect로 이동
  effect = effect.next;

// 🔽 한 바퀴 돌면 종료
} while (effect !== firstEffect);

✅ 의미

firstEffect: 리스트의 시작점
effect: 현재 순회 중인 effect 객체
effect === firstEffect: 한 바퀴를 다 돌았다는 신호 → 반복 종료

5. “처음 effect와 같아지면 멈춘다”의 의미

“같다”는 건 객체 참조가 동일함을 의미한다. (===)
즉, effect 변수가 다시 리스트의 시작 객체를 가리키게 되면
한 바퀴를 다 돈 것이므로 루프를 종료한다.

🌀 이 조건이 없으면 순환 연결 리스트 특성상 무한 루프가 발생한다.

6. useEffect가 하나만 있을 때

effect 하나만 등록된 경우:
```
effectA.next = effectA
```
순회 시:
1. effectA.create() 한 번 실행
2. effect = effect.next → 다시 effectA
3. effect === firstEffect → true → 즉시 종료
✅ 한 번만 실행되고 끝난다.

7. 렌더링과의 관계

렌더링 단계: useEffect 훅 호출 시 effect 객체 생성 및 등록
커밋 단계: DOM 업데이트 완료 후, effect 실행 예약
패시브 이펙트 단계: 실제 effect 콜백(create) 실행
따라서 “멈추는 이유”는 렌더링이 아니라 순환 구조의 제어 로직 때문이며,
다만 effect 리스트 자체는 렌더링 중에 만들어진다.

8. “안 멈추면 어떻게 되나?”

🔥 무한 루프 발생

effect.next는 항상 존재(순환 구조)하므로
“처음으로 돌아왔을 때 멈춘다”는 조건이 없으면 루프가 끝나지 않는다.
결과적으로 브라우저가 멈추고 CPU를 100% 점유한다.

🧩 최종 요약

항목	핵심 요약
자료구조	useEffect는 순환 연결 리스트(circular linked list)로 관리됨
실행 시점	렌더링 후, 커밋 완료 후 비동기적으로 실행
반복 구조	do...while 루프를 통해 한 바퀴만 순회
종료 조건	`effect === firstEffect` (처음으로 돌아오면 종료)
하나만 있을 때	한 번 실행 후 즉시 종료
멈추지 않으면	무한 루프 발생, 브라우저 멈춤
렌더링과의 관계	effect 등록은 렌더링 중, 실행은 렌더링 이후

💡 정리
useEffect는 렌더링 중 생성된 effect 객체들을 순환 연결 리스트로 관리하고,
커밋 후 한 바퀴를 돌며 각 콜백(create)을 실행한다.
“처음 effect와 같아지면 멈춘다”는 건
한 바퀴 순회를 끝냈다는 신호이며,
이 조건이 없으면 무한 루프에 빠진다.

1e:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"React useEffect 내부 동작 정리\",\"description\":\"1. Effect 등록 구조useEffect()가 호출되면 React는 Effect 객체를 하나 생성한다.이 객체에는 다음 정보가 들어있다:{ tag, // effect 타입 정보 (mount/update 등) create, // useEffect 콜백 함수 destroy, //...\",\"image\":[\"https://3d-blog.vercel.app/blog/category/react/post/react-useeffect-%EB%82%B4%EB%B6%80-%EB%8F%99%EC%9E%91-%EC%A0%95%EB%A6%AC/opengraph-image\"],\"author\":{\"@type\":\"Person\",\"name\":\"성창수\"},\"publisher\":{\"@type\":\"Organization\",\"name\":\"3D Blog\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://3d-blog.vercel.app/opengraph-image\"}},\"datePublished\":\"2025-10-12T13:40:29.806Z\",\"dateModified\":\"2026-08-17T08:23:03.715Z\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://3d-blog.vercel.app/blog/category/react/post/react-useeffect-%EB%82%B4%EB%B6%80-%EB%8F%99%EC%9E%91-%EC%A0%95%EB%A6%AC\"},\"url\":\"https://3d-blog.vercel.app/blog/category/react/post/react-useeffect-%EB%82%B4%EB%B6%80-%EB%8F%99%EC%9E%91-%EC%A0%95%EB%A6%AC\"}"}}],["$","$20",null,{"fallback":null,"children":["$","$L26",null,{"postId":14,"slug":"react-useeffect-내부-동작-정리","categorySlug":"react"}]}],["$","div",null,{"className":"mx-4 max-w-4xl lg:mx-auto","children":[["$","$L27",null,{"href":"/blog/category/react"}],["$","section",null,{"className":"relative mb-12 mt-0 px-4 py-8 sm:px-6 md:rounded-2xl md:px-8 md:overflow-hidden md:border md:border-[#ff9a3c]/20 md:bg-gradient-to-br md:from-[#2a1545]/90 md:via-[#1c0e38]/85 md:to-[#12082a]/80 md:shadow-[0_0_32px_rgba(255,154,60,0.1)] dark:md:border-[#3de8ff]/[0.15] dark:md:from-[#0a0618]/90 dark:md:via-[#070414]/90 dark:md:to-[#000008]/85 dark:md:shadow-[0_0_32px_rgba(61,232,255,0.08)]","children":[["$","div",null,{"className":"pointer-events-none absolute inset-0 z-0 hidden md:block","children":["$","div",null,{"className":"h-full w-full bg-gradient-to-tr from-[#8a4a68]/15 via-[#1c0e38]/20 to-[#ffc090]/10 blur-[2px] dark:from-cyan-900/20 dark:via-fuchsia-900/10 dark:to-cyan-800/10"}]}],["$","h1",null,{"className":"relative z-10 mb-4 text-3xl font-extrabold md:drop-shadow-sm dark:md:drop-shadow-[0_2px_8px_#7dd3fc55] text-[#ffe8d0] dark:text-[#c8e8ff]","children":"React useEffect 내부 동작 정리"}],["$","div",null,{"className":"relative z-10 mb-6 flex items-center gap-3 text-xs text-[#d4a8c0]/85 dark:text-[#7ec8ff]/75","children":[["$","span",null,{"className":"font-mono","children":"성창수"}],["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"children":"2025-10-12"}],[["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"className":"text-[#ffb870] dark:text-[#3de8ff]","children":"React"}]]]}],false,["$","div",null,{"className":"relative z-10 mb-2 min-h-[88px] p-2","children":["$","$20",null,{"fallback":["$","div",null,{"className":"mb-6 min-h-[88px]","aria-hidden":true}],"children":[["$","$L4",null,{"moduleIds":["3623811150574836874"]}],"$L28"]}]}],["$","div",null,{"className":"relative z-10","children":["$","$L29",null,{"content":"$2a"}]}]]}],"$L2b"]}]] 21:null 25:[["$","title","0",{"children":"React useEffect 내부 동작 정리"}],["$","meta","1",{"name":"description","content":"1. Effect 등록 구조useEffect()가 호출되면 React는 Effect 객체를 하나 생성한다.이 객체에는 다음 정보가 들어있다:{ tag, // effect 타입 정보 (mount/update 등) create, // useEffect 콜백 함수 destroy, //..."}],["$","meta","2",{"name":"author","content":"성창수"}],["$","meta","3",{"name":"creator","content":"3D Blog"}],["$","meta","4",{"name":"publisher","content":"3D Blog"}],["$","meta","5",{"name":"robots","content":"index, follow"}],["$","meta","6",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://3d-blog.vercel.app/blog/category/react/post/react-useeffect-%EB%82%B4%EB%B6%80-%EB%8F%99%EC%9E%91-%EC%A0%95%EB%A6%AC"}],["$","meta","8",{"name":"google-site-verification","content":"txYmXq1GLSvBcoTz6-zWwFTe4Wl0bmJ1DYYi97AnAB0"}],["$","meta","9",{"property":"og:title","content":"React useEffect 내부 동작 정리"}],["$","meta","10",{"property":"og:description","content":"1. Effect 등록 구조useEffect()가 호출되면 React는 Effect 객체를 하나 생성한다.이 객체에는 다음 정보가 들어있다:{ tag, // effect 타입 정보 (mount/update 등) create, // useEffect 콜백 함수 destroy, //..."}],["$","meta","11",{"property":"og:url","content":"https://3d-blog.vercel.app/blog/category/react/post/react-useeffect-%EB%82%B4%EB%B6%80-%EB%8F%99%EC%9E%91-%EC%A0%95%EB%A6%AC"}],["$","meta","12",{"property":"og:site_name","content":"3D Blog"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://3d-blog.vercel.app/blog/category/react/post/react-useeffect-%EB%82%B4%EB%B6%80-%EB%8F%99%EC%9E%91-%EC%A0%95%EB%A6%AC/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"3D Blog Post"}],["$","meta","19",{"property":"og:type","content":"article"}],["$","meta","20",{"property":"article:published_time","content":"2025-10-12T13:40:29.806Z"}],["$","meta","21",{"property":"article:modified_time","content":"2026-08-17T08:23:03.715Z"}],["$","meta","22",{"property":"article:author","content":"성창수"}],["$","meta","23",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","24",{"name":"twitter:creator","content":"성창수"}],["$","meta","25",{"name":"twitter:title","content":"React useEffect 내부 동작 정리"}],["$","meta","26",{"name":"twitter:description","content":"1. Effect 등록 구조useEffect()가 호출되면 React는 Effect 객체를 하나 생성한다.이 객체에는 다음 정보가 들어있다:{ tag, // effect 타입 정보 (mount/update 등) create, // useEffect 콜백 함수 destroy, //..."}],["$","meta","27",{"name":"twitter:image","content":"https://3d-blog.vercel.app/blog/category/react/post/react-useeffect-%EB%82%B4%EB%B6%80-%EB%8F%99%EC%9E%91-%EC%A0%95%EB%A6%AC/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","28",{"name":"twitter:image:alt","content":"3D Blog Post"}],["$","meta","29",{"name":"twitter:image:type","content":"image/png"}],["$","meta","30",{"name":"twitter:image:width","content":"1200"}],["$","meta","31",{"name":"twitter:image:height","content":"630"}],["$","link","32",{"rel":"icon","href":"/favicon.ico?favicon.43c1ha936bzt6.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L2c","33",{}]]

React useEffect 내부 동작 정리

댓글