1. 배경
useEffect는 컴포넌트가 렌더링 될 때마다 작업을 실행할 수 있도록 하는 hook이다
컴포넌트가 mount(처음 나타났을 때)/unmount/update 됐을 때 각각 특정 작업을 처리할 수 있다
이는 클래스형 컴포넌트 라이프 사이클에서 볼 수 있는 componentDidMount와 componentDidUpdate를 합쳐놓은 것으로 봐도 무방하다(?)
useEffect의 effect는 동작을 하고난 후 일어나는 부수적인 효과를 의미한다
2. 기본적으로 렌더링되고 난 직후마다 실행
useEffect(() => {
console.log("렌더링 완료: componentDidMount + componentDidUpdate");
});3. 마운트 될 때만 실행하고 싶을 때
useEffect(() => {
console.log("마운트 될 때만 실행");
}, []);4. 특정 값이 업데이트 될 때만 실행하고 싶을 때
useEffect(() => {
console.log(target);
}, [target]);5. cleanup (컴포넌트가 언마운트 되기 전이나 업데이트 되기 전에 수행)
useEffect(() => {
console.log("effect");
return () => {
console.log("cleanup");
}
});6. useLayoutEffect()와 다른점
useLayoutEffect의 동작은 useEffect와 동일하지만 차이가 있다
useEffect- 실행시점: 컴포넌트 랜더링 → 화면 업데이트 → useEffect 실행
- 비동기적 실행
- dom과 인터렉션이 없는 경우에 사용 (대부분의 경우)
만약 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서 화면의 깜빡임을 보게 됨
useLayoutEffect- 실행시점: 컴포넌트 랜더링 → useLayoutEffect 실행 → 화면 업데이트
- 동기적 실행
- 렌더링 직후 dom 요소 값을 읽을 때 유용하다 (scroll, position, etc, ...)
- dom을 mutate할 경우 사용한다
둘의 가장 큰 차이는 렌더링 시점에 있다
ref
Frontend Developer