개요
React는 state의 변경이 감지되면 rendering을 한다고 배웠습니다.
그리고 useEffect를 사용하면 dependency array를 이용해 부수효과를 일으키게 되는데
이 hook은 Render -> Paint가 된 이후에 발생하기에
이미 전체 틀이 그려진 상태에서 무언가 변경되기에
결과는 같다고 하더라도 약간의 버벅임을 느끼곤 했습니다.
최근 진행했던 프로젝트에서, Navigation bar의 특정 버튼을 누르면
숨어있던 메뉴가 나타나는 기능이 있습니다.
이 영역은 fixed 속성을 지니기 때문에 body의 스크롤바가 사라지도록 구현해두었는데
useEffect를 사용했을 때의 버벅임처럼 오묘히 스크롤바가 바로 사라지지 않는 듯한 기분이 있었고,
그것을 해결하기 위해 useLayoutEffect를 활용한 custom hook을 따로 만들어 사용했습니다.
그래서 useLayoutEffect는 뭔데?
react hook의 흐름이 잘 정리되어있는 것 같아 인용했습니다.
LayoutEffect는 일반 Effect와 달리, Paint가 되기 전에
Side Effect를 적용시킨다는 것을 알 수 있습니다.
useLayoutEffect(()=>{
/* something works */
},[dependency])사용법 또한 useEffect와 별반 다르지 않았습니다.
즉, UX 적인 관점에서 보았을 때
위의 스켈레톤 UI처럼 DB로부터 데이터가 오기 직전에 껍데기(?) 같은 걸 보여주며 경험을 향상시키거나 하는 것처럼
브라우저에 그려지기 전 DOM에 적용시켜 바로 뙇! 보여주는 것으로 이해했고, 실제로 느꼈습니다.
언제 써야돼?
간단하게, '깜빡임'이 일어나 불편한 부분에 대해 쓰면 되겠다는 결론입니다.
1. React state updates 2. React Renders DOM 3. If useLayoutEffect is exists, it runs 4. React paints screen 5. If useEffect is exists, it runs.
다만 조심해야될 것은 '간단한' 경우에만 써야되겠구나 라는 부분입니다.
예를 들어 fetch나 axios, event handler와 같이 heavy한 작업이 layoutEffect에서 처리된다면
물론 한 번에 painting은 되겠지만 그 시점까지 도달하는 시간이 길어지면서
오히려 UX적인 관점에서 부적절한 동작이 발생할 가능성이 있을 것 같습니다.
위의 스크롤바 hide 예시처럼
인라인에서 간단한 속성을 토글한다던가, 혹은 style 처리시 className 토글을 통해 css에서 처리하도록 넘긴다거나
에 대한 부분에만 제한적으로 사용하고, 보편적인 경우에는 useEffect를 사용하면 되겠구나.. 라는 생각입니다.
