hooney.log

리액트 쓸 때 거의 무조건 쓰게 되는 훅 중 하나가 useEffect다. 처음에는 "컴포넌트 마운트 될 때 실행되는 함수 아니야?" 하고 쉽게 생각할 수 있는데, 막상 실제로 쓰다 보면 언제 호출되는지 헷갈리는 경우가 꽤 많다. 이번 글에서는 useEffect가 정확히 언제 호출되는지, 그리고 디펜던시 배열에 따라 어떻게 달라지는지 정리해봤다. ✅ useEffect 기본 구조useEffect(() => { // 실행할 코드}, [/* 의존성 배열 */]); 의존성 배열(dependency array)에 뭐가 들어가느냐에 따라서 실행 타이밍이 달라진다. 아래에서 하나씩 살펴볼게. 1️⃣ 의존성 배열이 없는 경우useEffect(() => { console.log('렌더링 이후마다 실행됨')..

React에서 컴포넌트를 만들다 보면 useEffect와 useLayoutEffect라는 두 훅(Hook)을 마주하게 된다. 이름은 비슷하지만 실행 타이밍과 용도, 그리고 렌더링 성능에 미치는 영향까지 완전히 다르다. 이번 포스팅에서는 이 둘의 차이점, 실행 순서, 사용 시 주의점, 그리고 실전 예제까지 한 번에 정리해본다. 📌 핵심 요약항목useEffectuseLayoutEffect실행 시점화면 그린 뒤 (비동기)화면 그리기 직전 (동기)렌더 차단 여부❌ 렌더 차단 안 함✅ 렌더 차단함목적API 호출, 로깅 등 비 UI 작업DOM 측정, 스타일 조정 등 UI 관련 작업성능 영향렌더링 후 실행 → 퍼포먼스에 유리렌더링 전에 실행 → 렌더 지연 가능성SSR(Server Side Rendering)S..