1. React 컴포넌트에서 null 반환 vs false 반환

“return null” vs “return false” in React | by Çağlayan Yanıkoğlu | Apr, 2023 | Medium

null 반환

  • 리액트에게 아무것도 렌더링하지 말라고 알려준다.
  • 따라서 DOM 에는 아무것도 그려지지 않는다.

false 반환

  • 리액트에게 아무것도 렌더링하지 말라고 알려준다.
  • 따라서 DOM 에는 아무것도 그려지지 않는다.
  • 컴포넌트가 추후에 업데이트 되는 것을 막는다.
    • 리액트는 false를 일종에 unmount 시그널로 본다.
    • 따라서, 영구적으로 DOM에서 제거한다.

따라서 조건부 렌더링 시에는 null을 사용하는 편이 사이드이펙트가 적지만, 역으로 false를 이용하여 사이드이펙트가 없는 정적인 컴포넌트를 조건부렌더링 할 수 있다.

여기서 사이드이펙트는 API 요청, 상태변화 등등이다.


2. 리액트 쿼리 - 유저별 데이터 구분하기

리액트 쿼리는 캐싱을 지원한다. 따라서 한번 API 요청한 값들을 쿼리클라이언트에 캐싱하고 있다가, 똑같은 요청이 stale time 내에 들어오면, 다시 요청을 하는게 아니라 캐싱된 값을 보여준다.

여기서 캐싱은 queryKey를 기준으로 저장된다. 그런데 장바구니 리스트를 요청하는 queryKey를 cart라고 했다고 치자. 만약 동일한 브라우저에서 A유저가 장바구니를 조회 한 후 로그아웃하고, 빠른 시간 내에 B 유저로 로그인한다면 어떻게 될까? B유저로 로그인했지만, 쿼리클라이언트에 남아있는 cart 캐시 데이터는 A유저의 것이다. 유저간 데이터가 공유 될 수 있다. 이를 어떻게 해결할까?

방법 1. QueryKey에 유저 정보를 넣기

  • 캐싱 기준에 유저 정보 ex) userToken 도 함께 넣어준다. 그러면 로그인하는 유저별로 캐싱되는 데이터가 달라진다.
useQuery(['cart', getUserToken()]);

하지만 쿼리클라이언트에는 다른 유저의 정보가 남아있는데?

유저가 쿼리클라이언트에 접근 할 수는 없겠지만, 효율을 위해서 이미 로그아웃 된 유저의 정보는 지워지는게 좋다. 이를 위해서는 쿼리클라이언트의 메서드인 removeQueries를 사용 할 수 있다.

const queryClient = useQueryClient();

// 로그아웃 시
queryClient.removeQueries({ queryKey: getUserToken(), exact: true });

removeQueries를 하면 쿼리키에 해당하는 모든 캐시들이 쿼리클라이언트에서 제거된다. (하지만 캐시가 지워졌다고해서 invalidateQuery 처럼 구독 중인 컴포넌트들에게 refetch 는 되지 않는다.)

잠깐, 그러면 로그아웃 할 때 해당 캐시를 다 날려주면 되는거 아닌가? 굳이 유저 식별 데이터를 쿼리키로 추가해야 할까? 🤔

방법 2. removeQueries 혹은 invalidateQueries 로 로그아웃 시, 유저별로 구분되어야 하는 데이터 캐시 일괄 제거하기

const queryClient = useQueryClient();

// 로그아웃 시
// removeQueries 예시
queryClient.removeQueries({ queryKey: ['cart', 'order'], exact: true });
// removeQueries는 추가로 여기에 refetch 로직도 추가해야함.

// 로그아웃 시
// invalidateQueries 예시
queryClient.invalidateQueries({ queryKey: ['cart', 'order'], exact: true });

이렇게하면 유저토큰 정보를 queryKey에 넣지 않아도 유저별로 구분되어야 하는 데이터들의 캐시들이 쿼리클라이언트에서 제거된다.

하지만, 위 방법의 단점은

  • 로그아웃하는 곳에서 어떤 데이터가 유저별로 구분되어야 하는지 알고 있어야 한다.

첫번째 방법처럼 간단하게 userToken과 같이 유저를 식별할 수 있는 정보 하나만을 (제거 대상) 쿼리키로 넣는게 아니라, 어떤 데이터가 유저별로 구분되어야 하는지 removesQueries에서 알고 있어야 한다.

이는 조금 부자연스러운 사고로 이어지기도 한다. 로그아웃을 한다면 로그아웃하는 유저가 관련된 캐시들을 제거한다. 가 아니라, 로그아웃을 한다면 장바구니, 주문 데이터 캐시 등등을(추후 데이터 추가 가능) 제거한다. 가 된다.

코드를 처음 읽는 사람은 맥락을 파악하는데 (로그아웃하는데 왜 장바구니 관련 캐시가 제거될까..?🫨) 오래걸릴 수 있을 것 같다.


👩🏻‍🌾 사담

  • 필라테스를 시작했다.
  • 간단한 코드리뷰 및 질문 답변 알바(?) 중인데 답변 하면서 내가 더 많이 배우는 것 같다.
  • 여행준비 완료 🧳 대학생-취준생의 기나긴 터널 이후로 첫 해외여행이다. 리프레시 하고 와야겠다.