useLayoutEffect

UseEffect, useLayoutEffect

---

useEffect

• layout, paint를 완료한 뒤 호출된다.
• 함수컴포넌트 호출 -> render문 반환 -> 배치 -> 그림 -> useEffect 호출
• dep arr를 줬을 때 의존 상태의 변화가 있을 때마다 호출되므로 비동기요청에 대한 결과를 보여줄 때 깜빡 거림

3번째 항목인 깜빡거림을 경험하지 않도록 useLayoutEffect hook이 추가됨

• 이런거..

useLayoutEffect

• 그리기 이전에 func를 호출
• 함수컴포넌트 호출 -> render문 반환 -> 배치 -> useLayoutEffect 호출 -> 그림
• effect와 문법도 같은데 생명주기에서 호출되는 시점에서 그리기 전(화면에 보이는 것)이냐, 보이고 나서 호출되냐의 차이점

필요한 상황은 딱히 생각나진 않지만, 헤더의 로그인 아이콘 <-> sign up / in의 구분정도를 그리기 전에 판단해서 보여줄 수 있을 것 같다.

어떨때 쓴다라고 딱 정의하긴 애매