[React] useEffect 함수와 useLayoutEffect 함수의 차이점

1. useEffect 함수

• react dom에 렌더링 된 후 비동기식으로 실행
• 비동기식으로 실행되므로 복잡한 연산을 사용해도 화면 빠르게 그려짐

2. useLayoutEffect 함수

• react dom에 렌더링 된 후 동기식으로 실행
• 동기식으로 실행되므로 복잡한 연산을 사용하면 화면이 느리게 그려짐

 

렌더링 직후 돔 요소의 값을 읽어들이는 경우 또는 조건에 따라서 컴포넌트를 다시 렌더링하고 싶은 경우에만

useLayoutEffect 함수를 사용하자