[Hook] useEffect, useLayoutEffect 차이

간단하게 useEffect와 useLayoutEffect의 차이점에대해 알아봤다.

 

useEffect는 DOM이 화면에 그려진 후 발생된다.

그래서 만약 아래와 같은 코드가 있을시에 빈값이 잠깐보였다가 값이 추가된걸 볼 수 있다.

...
useEffect(() => {
	setName("홍길동");
},[])

...

return (
	<div>이름 : ${name}</div> // "이름 : "-> "이름 : 홍길동"
)
...

 

이때 useLayoutEffect를 사용하면 DOM이 화면에 그러지기 전에 발생됨으로

 

 값이 할당되고 나서 DOM이 그려지기 때문에 빈값을 안 볼 수 있다.

 

- useEffect의 이펙트는 DOM이 화면에 그려진 이후에 호출된다.

- useLayoutEffect의 이펙트는 DOM이 화면에 그려지기 전에 호출된다.

- 따라서 렌더링할 상태가 이펙트 내에서 초기화되어야 할 경우, 사용자 경험을 위해 useLayoutEffect를 활용하자!

 

[출처]

useLayoutEffect 훅에 대하여