useEffect의 실행 순서에 대해 설명해주세요
일단 내가 알고있는 지식으로는
기본적으로 의존배열에 값을넣고, 의존배열안의 값이 변화하면 변화를 감지하고 1번째 인자의 함수가 발동하는
구조로 알고있었고 변화를 감지한다는것은 변화가 일어난 후에 발동을 한다는것이고 변화가 일어난 후 라는것은
렌더링이 끝난 후에 useEffect가 발동한다고 알고있었다.
찾아보니 렌더링 후에 일어나는건 맞고 useEffect에도 하위컴포넌트부터 순차적으로 일어난다던가 하는
순서가 있다는것도 알게되었다.
useEffect와 useLayoutEffect 차이에 대해 설명해주세요
이 개념을 green step 헤더가 깜빡이는 현상에 대해 찾아보면서 처음 찾아봤었다.
그때는 세세한 차이점은 몰랐었는데, 찾아보니
useEffect는 렌더링과 화면에 그리는 paint가 끝난 후 비동기적으로 처리된다.
비동기적으로 실행되기 때문에 useEffect안에 dom에 영향을 주는 코드가 있을경우
순간적인 깜빡임이 발생할 수 있다.
useLayoutEffect은 렌더링이 끝나고 실행하고 그 후에 paint가 실행되기 때문에 화면의 깜박임이 발생하지 않는다.
하지만 paint전의 로직이 복잡할때 사용자가 레이아웃을 볼때까지 시간이 걸린다는 단점이 있다.
>_<