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는 동기적으로 실행된다.