Realtime

Supabase Realtime은 데이터베이스의 변경 사항을 실시간으로 클라이언트에 전달합니다. 채팅, 알림, 실시간 대시보드처럼 즉각적인 갱신이 필요한 기능에 적합합니다. 이 강의에서는 채널 구독과 postgres_changes 이벤트 처리를 다룹니다.

학습 목표

• Realtime 채널을 만들고 구독한다.
• postgres_changes로 테이블 변경을 수신한다.
• INSERT/UPDATE/DELETE 이벤트를 구분해 처리한다.
• 구독을 안전하게 해제한다.

Realtime 활성화

Realtime은 테이블 단위로 켜야 합니다. 콘솔의 Database → Replication(또는 테이블 설정)에서 대상 테이블의 Realtime을 활성화합니다. 켜지 않으면 변경 이벤트가 전달되지 않습니다.

채널 구독

channel로 채널을 만들고, on으로 수신할 이벤트를 등록한 뒤 subscribe로 연결합니다.

const channel = supabase
  .channel('posts-changes')
  .on(
    'postgres_changes',
    { event: 'INSERT', schema: 'public', table: 'posts' },
    (payload) => {
      console.log('새 게시글:', payload.new);
    },
  )
  .subscribe();

payload.new에는 변경 후의 행, payload.old에는 변경 전의 행이 담깁니다.

모든 변경 이벤트 수신

event: '*'로 INSERT, UPDATE, DELETE를 한 번에 받을 수 있습니다.

supabase
  .channel('all-posts')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'posts' },
    (payload) => {
      console.log(payload.eventType, payload.new, payload.old);
    },
  )
  .subscribe();

eventType	payload.new	payload.old
INSERT	새 행	비어 있음
UPDATE	변경 후 행	변경 전 행
DELETE	비어 있음	삭제된 행

특정 행만 필터링

filter 옵션으로 관심 있는 행만 수신할 수 있습니다.

supabase
  .channel('room-1')
  .on(
    'postgres_changes',
    {
      event: 'INSERT',
      schema: 'public',
      table: 'messages',
      filter: 'room_id=eq.1',
    },
    (payload) => console.log(payload.new),
  )
  .subscribe();

💡 TIP — Realtime도 RLS의 영향을 받습니다. 사용자가 RLS 정책상 볼 수 없는 행의 변경 이벤트는 전달되지 않으므로, 보안 설계가 그대로 적용됩니다.

구독 해제

컴포넌트가 사라질 때 구독을 정리하지 않으면 메모리 누수와 중복 수신이 발생합니다. removeChannel로 해제합니다.

const channel = supabase.channel('posts-changes') /* ... */ .subscribe();

// 정리 시점
supabase.removeChannel(channel);

⚠️ 주의 — React에서는 useEffect의 정리 함수에서 반드시 removeChannel을 호출하세요. 누락하면 리렌더링마다 채널이 쌓여 이벤트가 여러 번 발생합니다.

요약

• Realtime은 테이블별로 활성화해야 변경 이벤트가 전달됩니다.
• channel().on('postgres_changes', ...).subscribe()로 구독합니다.
• event로 INSERT/UPDATE/DELETE를 구분하며 payload.new, payload.old를 활용합니다.
• 구독은 removeChannel로 반드시 해제하고, RLS가 이벤트 수신에도 적용됩니다.

연습문제

1. Realtime 이벤트를 받으려면 테이블 차원에서 먼저 무엇을 해야 하는가?
2. INSERT, UPDATE, DELETE를 한 번에 구독하려면 event 값을 어떻게 설정하는가?
3. DELETE 이벤트에서 삭제된 행 정보는 payload의 어느 속성에 있는가?
4. 구독을 해제하는 메서드는 무엇인가?

힌트 — payload.new와 payload.old의 의미, 그리고 채널 정리 메서드를 떠올리세요.