728x90
1. useEffect 함수
- react dom에 렌더링 된 후 비동기식으로 실행
- 비동기식으로 실행되므로 복잡한 연산을 사용해도 화면 빠르게 그려짐
2. useLayoutEffect 함수
- react dom에 렌더링 된 후 동기식으로 실행
- 동기식으로 실행되므로 복잡한 연산을 사용하면 화면이 느리게 그려짐
렌더링 직후 돔 요소의 값을 읽어들이는 경우 또는 조건에 따라서 컴포넌트를 다시 렌더링하고 싶은 경우에만
useLayoutEffect 함수를 사용하자
728x90
'Front-End > React' 카테고리의 다른 글
| [React] key값을 이용한 Component Unmount (0) | 2020.12.23 |
|---|---|
| [React] DOM 요소에서 key 값의 중요성 (0) | 2020.12.23 |
| [React] 클래스형 컴포넌트와 함수형 컴포넌트 (0) | 2020.12.15 |
| [React] Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 해결 방법 (0) | 2020.12.15 |
| [React] 리액트란 ? 리액트의 특징 정리 (0) | 2020.12.10 |