[리액트] useEffect vs useLayoutEffect

 

[React_ useLayoutEffect]

 

useEffect와 useLayoutEffect의 차이를 알아보자.

 

 

---

 

이전 회사에 재직하면서 useLayoutEffect라는 React Hook을 처음 접하게 되었다.

 

사실 잊고 살다가 얼마 전 면접에서 useEffect와 useLayoutEffect의 차이와 useLayoutEffect를 사용해 본 적 있냐는 질문에 다시 떠올랐다.

사용해 본 적도 없고 개념도 잘 몰라서 솔직하게 모른다고 대답하긴 했지만,

이번 기회에 공부해보는 것도 좋을 것 같아서 정리해 보려고 한다.

---

 

<STUDY>

 

❓ useEffect, useLayoutEffect

React Component의 Side Effect를 관리하는데 사용되는 Hooks

 

 

1️⃣ useEffect(setup, dependencies)

• 모든 컴포넌트가 render & paint된 이후 비동기적으로 실행된다.
• 실행 함수에 DOM에 영향을 주는 코드가 있을 경우 화면 깜빡임을 경험할 수 있다.
• dependencies에 컴포넌트 내부에 정의된 객체 or 함수가 있는 경우 필요 이상으로 재실행 될 수 있다.(무한 호출)

 

1. setup 함수

   - Effect 로직이 포함된 함수

   - clean up 함수 사용 가능

   - 컴포넌트가 DOM에 추가될 때 실행됨

 

📌 clean up 함수
- 의존성 배열이 변하면서 모든 리렌더링이 끝나고 처음으로 실행된 이후 setup 함수 실행
- 컴포넌트가 DOM에서 사라질 때 실행

 

 

2. dependencies (optional)

   - setup 함수 안에서 참조되는 반응값(reactive values)의 배열

   - 반응값: 컴포넌트 안에서 선언된 props, state, variables, functions 등

   - 생략시 리렌더링이 발생할 때마다 다시 실행

 

useEffect(() => {
  // functions ...
  
  return () => {
    // clean up function ...
  }
}, [dependency1, dependency2, ...])

 

 

2️⃣ useLayoutEffect(setup, dependencies)

• 브라우저가 화면을 다시 그리기 전 (paint) 실행되는 useEffect 버전
• 모든 컴포넌트가 render된 이후 동기적으로 실행되고 컴포넌트를 그리기(paint) 때문에 화면 깜빡임이 없다.
• 로직이 복잡할 경우 사용자가 화면을 보기까지 오래걸린다.
• 과도하게 사용하는 경우 속도가 저하될 수 있다.

 

1. setup 함수

   - Effect 로직이 포함된 함수

   - clean up 함수 사용 가능

   - 컴포넌트가 DOM에 추가되기 전(paint 이전) 실행됨

 

2. dependencies (optional)

   - useEffect와 동일

 

useLayoutEffect(() => {
  // functions ...
  
  return () => {
    // clean up function ...
  }
}, [dependency1, dependency2, ...])

 

 

❓ useEffect vs useLayoutEffect

 

	useEffect	useLayoutEffect
공통점	1. 컴포넌트 최상단 or 자체 hooks (커스텀 훅)에서 호출 가능 2. 클라이언트 단에서만 실행 (서버 렌더링 동안 실행 X)
차이점	컴포넌트 render & paint 이후 비동기적으로 실행	컴포넌트 render 이후 동기적으로 실행 & paint 실행
	깜빡임현상	깜빡임 현상 X

 

---

 

 

공식문서에서는 성능이 저하될 수 있기 때문에 useLayoutEffect보다는 가급적 useEffect를 사용하라고 권장하고 있다.

 

물론 아무데서나 남용하면 성능 저하가 발생할 수 있겠지만,

예시에 나온 것처럼 컴포넌트의 크기를 측정하는 등 레이아웃과 관련된 작업을 수행할 때 유용하게 사용할 수 있을 것 같다.

 

 

<자세한 내용은 React 공식문서에서 확인 가능합니다>

 

useEffect – React

 

---

 

🔆내가 보려고 정리하는 React🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview