반응형
SMALL
React의 useLayoutEffect와 useEffect는 모두 컴포넌트의 상태를 감지하고 변경에 따른 동작을 수행하는 React Hook입니다.
하지만, 이 두 Hook은 수행되는 시점에서 차이가 있습니다.
useEffect는 브라우저가 렌더링 작업을 수행한 후에 비동기적으로 수행됩니다.
이는 컴포넌트가 렌더링 된 후에 일어난 변화에 대한 동작을 수행할 때 사용됩니다.
반면에, useLayoutEffect는 useEffect와 비슷하지만, 브라우저가 렌더링을 수행하기 전에 동기적으로 수행됩니다.
이는 렌더링이 발생하기 전에 상태 변경에 대한 동작을 수행해야 할 때 사용됩니다.
결과적으로, useLayoutEffect는 렌더링 전에 실행되기 때문에 일반적으로 더 빠르게 동작합니다.
그러나 이로 인해 렌더링 속도가 느려질 수 있습니다.
따라서, useEffect를 사용하는 것이 선호됩니다.
이를테면, DOM 요소를 변경할 때 useLayoutEffect를 사용하면,
변경된 내용이 브라우저에 적용되기 전까지 빈 화면이 표시될 수 있습니다.
이러한 경우에는 useEffect를 사용하여 변경된 내용이 브라우저에 적용된 후에 동작을 수행하면 더 나은 사용자 경험을 제공할 수 있습니다.
따라서, 일반적으로 useEffect를 사용하고 필요한 경우에만 useLayoutEffect를 사용하는 것이 좋습니다.
반응형
LIST
'React' 카테고리의 다른 글
| React의 StrictMode는 컴포넌트를 리렌더링하게 만드는건가? (0) | 2023.03.09 |
|---|---|
| React에서 useEffect는 어떻게 이루어져있나? (0) | 2023.03.09 |
| react-hook-form + @testing-library/react + Jest 어떻게 테스트 하지? (0) | 2023.03.01 |
| Jest + Testing Library +React에서 scrollTo is not a function 에러를 마주쳤을 때? (0) | 2023.03.01 |
| Cypress vs Playwright - 2023년에는 어떤 리액트 테스팅 툴을 써야할까? (Feat. Cypress vs Playwright: Which is best for E2E testing) (1) | 2023.03.01 |