useEffect vs useLayoutEffect

솔직히 useEffect에 대한 자세한 이해없이

화면 그려지고 난뒤 한번 호출한단 생각으로

 

useEffect(()=>{
 // do something I want
}, []);

이런 코드를 썼다.

 

조건에 따라 팝업 위치를 수정하는 코드였음

자꾸 팝업창이 우측 하단에 가서 처박혔다.

 

결론적으로 말하자면,

useLayoutEffect ( () => { 
// 무언가를 하세요 
}, [ dependency ]) 

useLayoutEffect 훅으로 바꾸었으며, 이것은 dependency 변경 여부에 따라 동기적으로 호출되는 함수다.

 

 

비동기적으로 호출하던것을

conditional 한 변수 참조 가능한 이후부터 동기적으로 호출하는 방식으로 바꾸었다.

 

 

현재 팝업 창은 한번 잠깐 깜빡거리고 && 의도한 위치한 곳에 노출된다.

 

 

reactjs.org/docs/hooks-reference.html#uselayouteffect

Hooks API Reference – React

 

 

blog.logrocket.com/useeffect-vs-uselayouteffect/ 

useEffect vs. useLayoutEffect in plain, approachable language - LogRocket Blog