[프리온보딩FE 사전미션] invalidateQueries, useLayoutEffect 사용.

dk.han·2023년 1월 4일
0
post-thumbnail

수료 후 원티드 프리온보딩 프론트엔드 코스에 지원하기 위해 사전 미션-TodoList를 만들었다.
만들면서 고민했던 2가지 부분에 대해 기록하고자 한다.
데이터 정합성을 갖추기 위해 사용한 invalidateQueries
새로고침시 UI 깜빡임을 해결하기 위한 useLayoutEffect

데이터 정합성을 갖춰라.

  • 한 페이지 내에서 새로고침 없이 데이터가 정합성을 갖추도록 구현해주세요.

TodoList 제작 조건이었는데, 즉 데이터 추가, 수정, 삭제시 새로고침을 하지 않아도 데이터가 업데이트되어 사용자에게 보여야 한다는 것이다. invalidateQueries를 사용해서 이 부분을 해결하였다.
invalidateQueries(key)에 의해 invalitate(무효화)를 시키면 key 값에 해당하는 useQuery 데이터의 staleTime 속성이 변경된다. 그에 따라 데이터를 다시 받아오면서 싱싱한 데이터들을 받아오게 된다.
그럼 나는 어느 부분에 invalidateQueries를 사용했을까?

  • 데이터 추가 (useMutation)
    useMutation에서 데이터 추가 통신이 성공하게되면 invalidate시켜 다시 받아오는 방법을 선택하였다.
  • 데이터 수정, 삭제
    수정과 삭제는 이벤트핸들러 함수안에 적용시켜주었다. 핸들러 함수 안에서 api 통신이 이루어지고 난 후 invalidate 시켜 데이터를 업데이트시켜 정합성을 갖추도록 하였다.

로그인, 비로그인 UI 변경시 깜빡이는 문제.

비로그인 유저와 로그인 유저에게 각각 다른 Header UI가 보여져야 한다.
이 부분을 isLogin state ( 로그인 시 true, 비로그인 시 false)를 통해 컨트롤하고 있었다.
useEffect를 통해 새로고침 시 로그인 상태라면 true로 바꾸어주는 로직을 사용하였다.
하지만 state는 새로고침을 하면 초깃값으로 돌아가기 때문에, 새로고침 시 isLogin이 잠시 false로 바뀌게 되면서 Header 부분이 깜빡이는 현상이 매우 거슬렸다.
이 부분을 해결하기 위해 도입한것이 useLayoutEffect다.

useEffect vs useLayoutEffect

리액트 훅의 실행순서가 정리된 이미지를 함께 참고해서 보도록 하자.
가장 큰 차이는 이펙트의 호출 시기이다.

  • useEffect는 DOM의 레이아웃 배치와 페인트가 끝난 후 이펙트 함수를 호출한다.
  • useLayoutEffect는 DOM이 화면에 그려지기 전에 호출, 즉 페인트 전 이펙트 함수가 호출된다.

이렇게 호출 시기가 다르기 때문에 useLayoutEffect를 사용해 깜빡이는 현상을 처리할 수 있었다.
하지만 useLayoutEffect는 동기적으로 실행되기 때문에, 로직이 복잡하다면 사용자가 레이아웃을 보는 데까지 시간이 오래 걸릴 수 있다. 때문에 특수한 경우가 아니라면 useEffect를 사용하는 것을 권장한다.

마무리

BilliG 프로젝트 때도 이 두 가지는 고민하고 신경 쓰였던 부분이다. 시간적 여유를 가지고 어떻게 적용시켜야 할지 고민하고, 해결 방법을 찾다 보니 invalidateQueries를 어떻게 사용해야 하는지 알 것 같다.
이래서 혼자 많이 만들어보고 경험해 봐야 한다고 하나보다... 프론트엔드가 재밋어지고 있따. 😃

Reference

hook-flow

0개의 댓글