useEffect 와 useLayoutEffect 차이점
useEffect와 useLayoutEffect 둘의 사용법은 아래와 같다. useLayoutEffect 1 2 3 4 5 6 useLayoutEffect(() = > { effect return () = > { cleanup }; }, [input]) cs useEffect 1 2 3 4 5 6 useEffect(() = > { effect return () = > { cleanup } }, [input]) cs useEffect 와 useLayoutEffect을 확인해보면 동일한 형태로 사용된다. 하지만 둘의 차이점은 바로 실행 시점의 차이이다. useEffect 동작 순서 1. DOM 렌더링(레이아웃 배치 등) 2. useEffect 내부 로직 수행 및 state 값 업데이트 3. 업데이트 된 state 값으로 DOM 리렌더링 useEffect는 비동기적으로 실행된다. useLayoutEffect 동작 순서 1. useLayoutEffect 내부 로직 수행 및 state 값 업데이트 2. 업데이트 된 state 값으로 DOM 렌더링 useLayoutEffect는 동기적으로 실행된다.