[React] useEffect 와 useLayoutEffect 의 차이점

 

useEffect

 

render 

• 렌더(render)가 화면에 그려지는(paint) 후 비동기적으로 실행
• paint 된 후에 실행되기 때문에 내부에 DOM에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게 된다

 

사용하는 경우

• 일부 상태를 즉시 발생할 필요가 없을 경우
• 페이지에 시각적으로 영향을 주지 않는 무언가를 동기화 할 경우
• 이벤트 핸들러를 설정하는 경우
• 모달상자가 나타나거나 사라질 때 일부 상태를 재설정하는 경우

 

 

 

useLayoutEffect

 

render

• 렌더링 후 화면이 업데이트 되기 전에 동기적으로 실행
• paint가 되기 전에 실행되기 때문에 DOM을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않는다

 

사용하는 경우

• 상태가 업데이트 될 때 요소가 깜박이는 경우
• DOM을 변경하려는 경우

 

 

useLayoutEffect에 대해서 진짜 처음들어봐서 너무 당혹스러웠다. useEffect를 동기적으로 실행할 수 있는 방법이라고 이해하면 좋을 것 같다. 그래서 로직이 복잡할 경우 사용자가 레이아웃을 보기까지 시간이 오래 걸린다는 단점이 있어서 useEffect만을 사용하는 것을 권장한다고 한다. 

 

데이터를 fetch하거나 event handler, state reset의 작업은 useEffect를 사용하되, 화면이 깜빡거리는 상황일 때는 useLayoutEffect를 사용하는 것이 바람직하다. 

 

 

 

 

 

 

 

 

 

참조 학습자료

◾ https://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5

◾ https://hyojin96.tistory.com/entry/%F0%9F%8D%80-useEffect-VS-useLayoutEffect-%F0%9F%8D%80