React useLayoutEffect

useEffect로 전달된 함수는 레이아웃 배치와 그리기를 완료한 후 발생합니다. 

이렇게 지연시켜서 실행하는 이유는 useEffect에서 실행하는 동작으로 인해 브라우저에서 화면을 업데이트 하는것을 차단해서는 안되기 때문입니다.

 

그래서 아래와 같은 현상이 발생할 수도 있습니다.

발생할 수도 있다는 것은 고쳐야 할 때도 있다는 것을 의미한다고 생각합니다.

 

useEffect

 

 

 

그래서 등장한 것이 useLayoutEffect 훅입니다.

위와 같은 사용자 경험이 발생하는 경우를 위하여 등장하였습니다.

useLayoutEffect 훅은 dom이 화면에 그려지기 전에 업데이트를 해줍니다.

동작은 useEffect와 동일하다고 이해하고 동작하는 시점만 화면에 그리기전 

useEffects는 dom 요소들이 화면에 그려지고 난후 반영된다고 이해하시면 편하실것 같습니다.

 

effect hook 실행에 대한 그래프

useLayouEffect

 

---

 

useLayoutEffect를 사용할 때 주의해야 할점이 있습니다.

서버에서 렌더링을 해야하는 경우에 자바스크립트는 다운로드 된 이후에 수행이 됩니다.

그말인 즉슨 다운로드 되는 동안에 html은 노출이 되어 있지만 (html parser는 파싱을 하는대로 dom을 그려주기 때문) 자바스크립트는 아직 실행이 되지 않는다는 말입니다.

더해서 dom 요소를 직접적으로 건드려 버려서 아예 html이 깨져보일것입니다.

그래서 react에서는 서버에서 렌더링 하는 경우 useLayoutEffect훅의 사용을 경고하고 있습니다.

 

이럴 경우 useEffect로 훅은 전환하거나 조건연산자(showChild && <Child />)를 이용해 노출을 지연시키는 것을 추천하고 있습니다.

 

 

 

출처 : 

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

Hooks API Reference – React

https://merrily-code.tistory.com/46

useLayoutEffect 훅에 대하여