인프런 커뮤니티 질문&답변

정지죤님의 프로필 이미지

작성한 질문수

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

Git Repository 생성 및 초기 설정 진행

reactQuery와 supabase의 channel등

해결된 질문

24.08.26 19:31 작성

·

34

0

reactQuery의
queryFn : ['users']
supabase의 channel의

const channel = supabase.channel("online_users", {

부분
users와 online_users의 쓰임새를 모르겠습니다.

queryFn : ['users', userId]를 하면 useEffect의 의존성 배열처럼 userId의 값에 따라 실행되는게 맞나요?
그럼 'users'는 뭔가요? 구조가 잘 와닿지 않습니다.ㅜㅜ

const channel = supabase.channel("online_users", {

"online_users"라는 이름값을 다른곳에서 사용할 때 쓰임새가 있는건가요?

답변 1

0

로펀님의 프로필 이미지
로펀
지식공유자

2024. 08. 27. 14:14

좋은 질문 주셨네요! React Query의 캐시 키와 Supabase의 채널명 사용에 대해 궁금해하시는 부분을 잘 짚어주셨어요. 우선, 이 둘은 각각의 라이브러리에서 중요한 역할을 하지만, 그 이름 자체는 특정 기능을 가지기보다는 주로 식별 용도로 사용됩니다.

먼저 React QueryqueryKey (`['users']`)부터 설명드릴게요. 이 키는 React Query가 캐시를 관리할 때 데이터를 구분하는 데 사용됩니다. 예를 들어, ['users']라는 키를 주면, React Query는 이 키를 기준으로 서버에서 가져온 데이터를 캐시에 저장합니다. 나중에 동일한 키로 요청이 들어오면, 서버에 재요청하지 않고 캐시에서 데이터를 가져오죠. 키에 userId 같은 특정 값을 추가하면, 해당 값이 바뀔 때마다 데이터를 새로 가져오게 됩니다. 언급해주신 것처럼 queryKeyuseEffect의 의존성 배열처럼 작동하는 부분이 있어요. 결국 'users'는 데이터를 구분하기 위한 이름표 같은 역할을 합니다.

Supabase"online_users" 채널명도 비슷한 맥락에서 이해하시면 됩니다. 이 채널명은 Supabase의 리얼타임 기능에서 이벤트를 구독할 때 사용됩니다. 예를 들어, "online_users" 채널에 구독을 걸어두면, 해당 채널에 연결된 이벤트가 발생할 때마다 이를 받아볼 수 있습니다. 당장은 저희가 한곳에서만 사용하기 때문에 이 이름이 특별한 기능을 하지는 않지만, 한 이벤트 채널을 여러 컴포넌트들이 공유할 때는 이 이름을 별도로 관리해주시는게 좋으세요! 이벤트를 구독하고 관리하기 위해 꼭 필요한 식별자 역할을 합니다.

요약하자면, React Query의 queryKey나 Supabase의 채널명 모두 이름 자체에 어떤 기능이 있는 건 아니고, 각각의 데이터를 구분하고 관리하기 위한 용도로 사용되는 식별자라고 보시면 됩니다. 답변이 되셨을까요?

또 궁금한 점 있으시면 언제든지 질문해 주세요! 😉