수료 후 원티드 프리온보딩 프론트엔드 코스에 지원하기 위해 사전 미션-TodoList를 만들었다.
만들면서 고민했던 2가지 부분에 대해 기록하고자 한다.
데이터 정합성을 갖추기 위해 사용한 invalidateQueries
새로고침시 UI 깜빡임을 해결하기 위한 useLayoutEffect
TodoList 제작 조건이었는데, 즉 데이터 추가, 수정, 삭제시 새로고침을 하지 않아도 데이터가 업데이트되어 사용자에게 보여야 한다는 것이다. invalidateQueries를 사용해서 이 부분을 해결하였다.
invalidateQueries(key)에 의해 invalitate(무효화)를 시키면 key 값에 해당하는 useQuery 데이터의 staleTime 속성이 변경된다. 그에 따라 데이터를 다시 받아오면서 싱싱한 데이터들을 받아오게 된다.
그럼 나는 어느 부분에 invalidateQueries를 사용했을까?
비로그인 유저와 로그인 유저에게 각각 다른 Header UI가 보여져야 한다.
이 부분을 isLogin state ( 로그인 시 true, 비로그인 시 false)를 통해 컨트롤하고 있었다.
useEffect를 통해 새로고침 시 로그인 상태라면 true로 바꾸어주는 로직을 사용하였다.
하지만 state는 새로고침을 하면 초깃값으로 돌아가기 때문에, 새로고침 시 isLogin이 잠시 false로 바뀌게 되면서 Header 부분이 깜빡이는 현상이 매우 거슬렸다.
이 부분을 해결하기 위해 도입한것이 useLayoutEffect다.
리액트 훅의 실행순서가 정리된 이미지를 함께 참고해서 보도록 하자.
가장 큰 차이는 이펙트의 호출 시기이다.
이렇게 호출 시기가 다르기 때문에 useLayoutEffect를 사용해 깜빡이는 현상을 처리할 수 있었다.
하지만 useLayoutEffect는 동기적으로 실행되기 때문에, 로직이 복잡하다면 사용자가 레이아웃을 보는 데까지 시간이 오래 걸릴 수 있다. 때문에 특수한 경우가 아니라면 useEffect를 사용하는 것을 권장한다.
BilliG 프로젝트 때도 이 두 가지는 고민하고 신경 쓰였던 부분이다. 시간적 여유를 가지고 어떻게 적용시켜야 할지 고민하고, 해결 방법을 찾다 보니 invalidateQueries를 어떻게 사용해야 하는지 알 것 같다.
이래서 혼자 많이 만들어보고 경험해 봐야 한다고 하나보다... 프론트엔드가 재밋어지고 있따. 😃