useEffect와 useLayouteffect 차이점?

useEffect와 useLayoutEffect의 가장 큰 차이점은 실행 시점입니다.

useEffect는 렌더링 이후에 비동기적으로 실행됩니다. 즉, 브라우저가 컴포넌트를 렌더링한 후, 화면이 그려진 이후에 실행됩니다. 따라서, 컴포넌트의 업데이트가 끝난 후 처리해야 할 작업이 있을 때 주로 사용됩니다. 대표적인 예로는 API 호출이나 이벤트 리스너 등이 있습니다.

 

반면, useLayoutEffect는 렌더링 직후에 실행됩니다. useEffect와 달리, 브라우저가 컴포넌트를 렌더링한 후, 실제로 화면에 그리기 전에 실행됩니다. 따라서, 컴포넌트의 업데이트가 끝난 후에 처리해야 하는 작업이 화면에 영향을 주는 경우, 예를 들어 DOM 노드의 크기나 위치를 조정하는 작업 등이 있을 때 주로 사용됩니다.

결론적으로, useEffect는 브라우저에게 화면 그리기를 맡기고, 그 이후에 비동기적으로 처리할 작업을 처리합니다. useLayoutEffect는 화면 그리기 이전에 처리해야 하는 작업을 처리하므로, 화면에 영향을 미치는 작업에서 사용됩니다.

 

 

useEffect

• 컴포넌트 렌더링 - 화면 업데이트 - useEffect실행
• 비동기적으로 실행됨
• DOM과 인터렉션이 없는 경우에 사용(대부분 경우)

useLayoutEffect

• 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트
• 동기적으로 실행됨
• 렌더링 직후 DOM요소의 값을 읽을 때 유용함(scroll position등)
• DOM을 mutate할 경우에 사용

useEffect를 사용할 경우 effect가 실행됨과 동시에 DOM에 mutation이 일어날 경우 flickering이 발생할 수 있다. 이러한 경우 useLayoutEffect를 사용해서 flickering을 막을 수 있다.

결국 두 hook의 가장 큰 차이점은 실행 시점이다.

 

 

 

 

 

 

 

 

 

useLayoutEffect를 사용하는 예시는 아래와 같다.

 

• DOM 요소의 크기나 위치를 변경할 때
• 애니메이션을 시작하거나 중단시킬 때
• DOM 요소의 크기나 위치를 변경할 때

 

 

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

https://ramincoding.tistory.com/entry/React-useLayoutEffect-%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C

 

 

렌더링과 페인팅의 차이를 정확히 표현하지못하여 찾아보았다.

 

렌더링과 페인팅은 비슷하지만 다른 개념입니다.

렌더링(Rendering)은 브라우저에서 HTML, CSS, JavaScript 코드를 이용해 가상의 DOM Tree를 만들고, 실제 DOM을 업데이트하는 과정을 말합니다. 이 과정에서 브라우저는 HTML, CSS, JavaScript 코드를 해석하고, 계산하는 등의 작업을 수행하여 화면을 그립니다. 즉, 브라우저가 컴포넌트를 렌더링하면 가상의 DOM Tree를 생성하고, 실제 DOM을 업데이트합니다.

반면, 페인팅(Painting)은 브라우저가 화면을 그리는 작업을 말합니다. 브라우저는 가상의 DOM Tree와 실제 DOM을 이용해 CSS 스타일을 적용하고, 화면을 그리는데 이를 페인팅이라고 합니다.

즉, 렌더링은 가상의 DOM Tree와 실제 DOM을 이용해 컴포넌트를 업데이트하는 과정이고, 페인팅은 이를 토대로 화면을 그리는 과정입니다. useEffect와 useLayoutEffect는 렌더링 이후와 렌더링 직후에 실행되는 것이지, 페인팅과는 직접적인 연관이 없습니다.