useEffect와 useLayoutEffect 차이점

차이점.

useLayoutEffect는 동기적으로, 렌더링 전에 호출이 일어나고 useEffect는 비동기적으로 렌더링 후에 호출이 일어난다.

성능 문제가 발생할 경우만 useLayoutEffect을 사용하고 기본적으로는 useEffect를 사용하는 것이 좋다.

제일 큰 차이점은 useEffect는 비동기적으로 동작하고 useLayoutEffect는 동기적으로 동작해요. 리액트에서 useEffect는 렌더링이 끝나고 특정 행동을 수행하고, useLayoutEffect는 렌더링 전에 특정 행동을 수행해요.

각각 언제 사용?

기본적으로, 데이터 조회와 상태 업데이트 시 useEffect를 사용하고, 레이아웃과 관련된 작업을 수행할 때에만 useLayoutEffect를 사용하는 것이 일반적으로 좋은 방법입니다. useLayoutEffect는 동기적으로 실행되며, DOM 변경 사항에 직접적인 영향을 미치므로 사용 시점을 신중하게 결정해야 합니다.