useEffect에 이름을 붙이면 코드가 달라지는 이유

useEffect가 길어질 때 그냥 안에 두지 말고 이름을 붙여 빼고 싶을 때가 있어요. 혹시 화면은 그대로인데 코드만 더 헷갈려진 적 없나요?

핵심은 단순해요. useEffect에 이름을 붙인다고 React의 실행 규칙이 바뀌지는 않아요. 바뀌는 쪽은 사람이 코드를 읽는 순서, 의존성을 실수하는 방식, 그리고 컴포넌트의 책임 분리예요. 혼자 운영하면서 화면 상태를 정리할 때도 이 차이가 생각보다 크게 남더라고요.

이름을 붙여도 effect 자체는 그대로예요

useEffect는 여전히 렌더 뒤에 실행되고, 의존성 배열이 같으면 다시 실행되는 조건도 같아요. 익명 함수 1개로 쓰든, syncScrollState 같은 이름 있는 함수로 빼든, 클로저가 같은 값을 잡고 있으면 결과도 같아요.

다만 직접 만들어 보면 읽는 흐름은 바로 달라져요. inline effect는 “여기서 무슨 부수효과를 하네”로 읽히고, 이름을 붙이면 “이 effect의 목적이 뭔지”부터 읽게 돼요. 화면 구현에서는 이 차이가 커요. 스크롤 고정, 외부 이벤트 구독, 폼 동기화처럼 역할이 2가지 이상 섞이기 시작하면 더 그렇고요.

렌더→effect 실행→cleanup 또는 재실행

좋아지는 점은 의도가 보인다는 거예요

제가 작은 컴포넌트에서 자주 보는 기준은 간단해요. effect 안에서 하는 일이 1가지면 그대로 두고, 2가지가 섞이면 이름을 붙여 분리해 봐요. 테스트해 보면 이때부터 리뷰 속도가 꽤 달라져요.

예를 들어 useEffect 안에 데이터 동기화, 이벤트 리스너 등록, 로그 기록이 3단계로 섞여 있으면 화면 버그를 찾기 어려워져요. 반대로 bindResizeListener, syncDraftToStorage처럼 목적이 드러나는 이름을 주면 어디를 봐야 할지가 빨라져요. 라이프케어로그에서 작은 도구 화면을 다듬을 때도 이런 식으로 반복을 줄이고 있어요.

하지만 더 안전해지는 건 아니에요

여기서 많이 헷갈려요. 함수 이름이 생겼다고 의존성 문제가 사라지지는 않아요. 오히려 바깥 함수를 참조하면서 의존성 배열이 3개, 4개로 늘어나면 왜 다시 실행되는지 더 늦게 보일 수 있어요.

적용해 보면 기준은 이것뿐이에요. 이름을 붙였는데도 effect가 외부 상태를 많이 잡고 있으면 아직 분리가 덜 된 거예요. 이럴 때는 이름 있는 함수보다 커스텀 훅으로 경계를 올리는 편이 낫고, 아니면 아예 effect 없이 이벤트 핸들러에서 끝낼 수 있는지 먼저 보는 게 좋아요.

• ✓동작은 그대로
• ✓의도는 선명하게
• ✓의존성은 더 엄격하게

언제 이름을 붙이면 좋을까요

컴포넌트가 길어져서 스크롤이 2번 이상 생기거나, effect 설명에 문장이 필요해지는 순간이면 신호일 수 있어요. 돌려 보면 화면 로직보다 준비 코드가 더 먼저 보일 때가 있는데, 그때 이름이 붙은 effect가 도움이 돼요.

반대로 5줄 안쪽의 짧은 정리라면 굳이 뺄 이유가 없어요. 프론트엔드 구현에서는 “더 추상화된 코드”보다 “다음에 봐도 바로 읽히는 코드”가 더 오래 가더라고요. useEffect에 이름을 붙이는 일은 React를 바꾸는 작업이 아니라, 컴포넌트의 책임을 드러내는 작은 편집에 가까워요.