23.08.28
1. useEffect
1-1. useEffect란,
useEffect : React의 내장되어있는 중요하고 많이 사용되는 Hook 중의 하나로, 컴포넌트가 렌더링될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
useEffect의 콜백은 컴포넌트가 마운트, 업데이트, 언마운트될 때 실행될 수 있다. 그렇다면 정확히 마운트 될 때 컴포넌트가 렌더링되면서 동시에 실행된다는 의미인지, 렌더링된 직후에 실행된다는 의미인지는 후자가 정답이다.
1-2. useEffect 구조
// useEffect 기본형
import react, { useEffect } from "react";
useEffect(callback,deps)callback 함수
deps
Dependency Array (의존성 배열) : useEffect, useCallback, useMemo 등의 Hook에서 사용되는 배열로, Hook이 불필요하게 반복해서 실행되는 것을 방지하여 성능을 최적화하기 위해서 조건으로 사용한다.
=> 즉, Dependency Array가 있냐 없냐에 따라 실행되는 조건도 다르다 ~!
-
Dependency Array가 없을 때
-
Dependency Array가 [ ] 빈 값일 때
컴포넌트가 Mount 될 때에만 실행 -
Dependency Array에 [count] 조건이 있을 때
컴포넌트가 Mount 될 때 실행
count의 값이 업데이트 될 때 실행
cleanup 함수
- useEffect 안에서 return 할 때 실행 => useEffcet의 뒷정리
- 만약 컴포넌트가 마운트 될 때 이벤트 리스너를 통해 이벤트를 추가하였다면 컴포넌트가 언마운트 될 때 이벤트를 삭제 해줘야 한다. 그렇지 않으면 컴포넌트가 리렌더링 될 때마다 새로운 이벤트 리스너가 핸들러에 바인딩 될 것이다. 이는 자주 리렌더링 될 경우 메모리 누수가 발생할 수 있다.
1-3. useEffect 실행 순서
import react, { useEffect } from "react";
const App = () => {
console.log('렌더링 시작')
useEffect(() => {
console.log('useEffect 실행');
return () => {
console.log('clean-up')
}
}, [])
console.log('!!!')
return (
console.log('컴포넌트 내부')
)
}결과는 두구두구두구
렌더링 시작 -> !!! -> 컴포넌트 내부 -> useEffect 실행 순으로 실행되고
컴포넌트가 언마운트될 때 clean-up가 시작된다 !!!!!!!!!!!!!!!!!!!!!!!!!!!
