[ React ] useEffect vs useLayoutEffect의 차이점

개발중 , useEffect를 useLayoutEffect로 바꾸었더니 해결되는 현상을 경험했다.

useLayoutEffect를 들어보긴 했지만.. 정확한 개념을 알고자 정리해보자! 

 

 

---

 

useEffect 

-  마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용한다.

-  Side effect를 수행하기 위한 Hook이다. 

 

useEffect에 대해서는 이전 글에서 자세히 정리해두었으니 아래 링크를 참고하도록 .. 

 

https://mandelina-code.tistory.com/80

[React - Hook] useEffect을 사용해 시계만들기

 

 

useLayoutEffect 

사실상 궁금한 것은 바로 useLayoutEffect이다.

공식문서에 따르면 , useEffect로 전달된 함수는 지연 이벤트 동안 render과 paint를 완료한 후 발생한다고 한다.

왜냐면 대부분의 작업이 브라우저에서 화면을 업데이트하는 것을 차단해서는 안되기 때문이다.

 

하지만?

모든 effect를 지연시키는것은 올바르지 않다.

ex)  DOM변경은 사용자가 불일치를 경험하면 안되므로 지연시키면 안된다.

 

따라서 다음화면을 그리지 이전에 동기화가 되어야한다. 이런 종류의 effect를 위해 추가적인 훅인 useLayoutEffect를 제공한다. 

 

---

 

나의 경우 서버ip값을 지정해주는 과정에서 API요청 후 서버ip가 set되어 API요청시에서는 ip값이 local로 잡히게 되는 트러블슈팅이 있었다. 이때 useEffect대신 useLayoutEffect를 사용하여 해결! 

 

😊정리

- useEffect는 랜더링된 이후에 동작하는 hook이고 , useLayoutEffect는 랜더링 되기 이전에 동작하는 hook이다.

 

- useEffect는 비동기적으로 실행되어, paint 이후에 useEffect 내부에 dom에 영향을 주는 코드가 있는경우 화면에 깜빡임이 나타날 수 있다. 

 

-useLayoutEffect는 동기적으로 실행되어 paint 이전에 실행되므로 dom에 영향을 주는 코드가 있더라도 깜빡임이 발생하지 않는다.

 

 

 

참고자료 

https://ko.reactjs.org/docs/hooks-reference.html#useeffect

https://ko.reactjs.org/docs/hooks-reference.html#uselayouteffect