useEffect 내부에서 함수 선언하는 것과 외부에서 선언 하는 것의 차이

useEffect를 사용하면서 내부와 외부에서 사용하는 것에 무슨 차이가 있을까? 라는 생각이 들었다.

차이점

스코프 차이

내부 선언

useEffect(() => {
  function doSomething() {
    console.log("effect 내부 함수");
  }
  doSomething();
}, []);

• 이 함수는 useEffect가 실행될 때만 존재하고, effect가 끝나면 GC(가비지 컬렉션) 대상이 된다.

• 외부에서 접근 불가능.

• effect 실행 때마다 새로 만들어짐.

외부 선언

function doSomething() {
  console.log("effect 외부 함수");
}

useEffect(() => {
  doSomething();
}, []);

• 컴포넌트 렌더링 시 이미 정의되어 있음.

• 여러 effect나 이벤트 핸들러에서 재사용 가능.

의존성 차이

내부 선언

useEffect 안에서 변수를 직접 참조 가능, 의존성 배열에 추가할 필요 없음(이미 effect의 클로저에 포함됨)

useEffect(() => {
  const id = 123;
  function logId() {
    console.log(id); // 가능
  }
  logId();
}, []);

외부 선언

외부 변수를 참조하면, 그 변수가 바뀔 때마다 함수가 새로 생성되거나 useCallback으로 감싸줘야 함

function logId(id: number) {
  console.log(id);
}

useEffect(() => {
  logId(123); // id를 직접 전달해야 함
}, []);

메모리 & 성능 차이

내부 선언

매번 effect가 실행될 때 함수가 새로 생성됨 → 단기적으로는 오버헤드 있지만, GC가 처리 가능.
재사용 필요 없는 1회성 함수에 적합.

외부 선언

재사용 가능 → 동일 로직을 여러 곳에서 호출 가능.
하지만 외부 변수를 많이 참조하면 useCallback 없이 의도치 않게 매번 새로 생성될 수도 있음.

클린업 시 차이

• 클린업 함수에서 내부 함수를 참조하면 매번 새로운 참조가 생겨서 정리 로직이 안전하게 작동.

• 외부 함수는 컴포넌트 생명주기와 무관하게 동일 참조를 가짐.

✅ 정리

• 재사용 안 하고 effect 안에서만 쓰는 함수 → 내부 선언

• 여러 effect나 이벤트에서 공유할 로직 → 외부 선언

• 외부 상태/변수를 참조해야 하는데 dependency를 관리하기 귀찮을 때 → 내부 선언이 편함

• 성능상 불필요한 재생성을 줄이고 싶을 때 → 외부 선언 + useCallback