[React] useEffect 내부에 함수 선언

서론

취업 준비를 하면서 보니 AI코딩 능력을 요하는 JD가 많아져서 요즘 연습 중이다
데이터 페칭 관련 코드 짜달라니까 useEffect안에 함수 선언을 하길래
분명 수업 때 useEffect 내부에 함수 선언을 하는 걸 들었는데 커서를 못 믿기도 하고 굳이 이렇게 해야 하나 싶어서 검색해 봤다

useEffect 실행 시점

리액트 내장 훅으로 매개변수로 콜백함수와 의존성 배열을 받는다
의존성 배열에 들어가는 상태값이 변경될 때마다 실행 됨

실행 시점

• 컴포넌트가 생성될 때
• 의존성 배열의 상태값이 변경될 때
• 컴포넌트가 사라질 때

함수가 의존성 배열에 들어가는 경우

• 함수는 매 리렌더링마다 새로 생성되기 때문에 useEffect가 리렌더링마다 실행된다
• 변경된 것이 없음에도 함수가 새로 생성됐다는 이유로 useEffect가 실행되는 비효율적인 상황

함수를 useEffect 외부에 선언했을 때

const [count, setCount] = useState(0)

const countNumber =()=>{
	setCount(++count)
}

useEffect(()=>{
  countNumber()
},[countNumber])

• 리렌더링 될 때 마다 새로 생성 됨
• 자바스크립트의 함수는 실행 시점이 아니라 정의된 시점의 state와 props를 기억하기 때문에 재정의 되지 않으면 최신의 상태값을 참조하지 못 할 수 있다

함수를 useEffect 내부에 선언했을 때

const [count, setCount] = useState(0)

useEffect(()=>{
  
  const countNumber=()=>{
	setCount(++count)
  }
  
  countNumber()
},[count])

• 의존성 배열의 값이 변경될 때만 새로 정의 됨
• 의존성 배열이 비어있을 경우 컴포넌트 생성될 때 최초 1회만 생성
• useEffect 안에서만 사용되는 함수를 생성할 때는 useEffect 안에서 정의하고 사용하면 리렌더링 시마다 불필요한 함수 정의를 막을 수 있다.
• 물론 의존성 배열이 없는 경우에는 외부에서 선언했을 때와 동일하게 동작
• 의존성 배열에 따라 최신의 상태값을 안전하게 참조할 수 있음

비동기 함수

• useEffect 내부에서 함수 선언이 가능한 것은 비동기 일 때 유용하다
• useEffect에 매개 변수로 들어가는 콜백 함수는 비동기 함수로는 사용할 수 없다

useEffect가 async가 안 되는 이유

• cleanUp 함수가 실행 되어야 하는데 비동기로 동작할 경우 실행이 안 되기 때문

React 19에서는?

• React 19에서는 memorization이 개선되어 의존성 배열에서 함수를 참조해도 새로운 함수라고 인지하지 않음
• 매 리렌더링마다 새로 정의되긴 함

참고

• react compiler

마무리

주제랑 관련 없지만,,,
Ai로 코딩하다가 롤백한 게 한두 번이 아니다 익숙해 져야 하는데 쓰기 싫음
근데 코드 추천 기능은 일 할 때 너무 좋음ㅋ