React Academy · 강의

세션 관리와 useSession 훅

서버 및 클라이언트 컴포넌트에서 세션 데이터에 접근하고 인증 상태에 따라 페이지를 보호합니다.

세션 관리와 useSession 훅은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Auth.js의 세션 타입

Auth.js는 두 가지 세션 전략을 지원합니다. JSON 웹 토큰(기본값, 쿠키에 저장되는 상태 비저장 토큰)과 데이터베이스(데이터베이스에 저장되는 세션 레코드로, 서버에서 무효화할 수 있음)입니다.

클라이언트 컴포넌트에서 useSession 사용하기

useSession()은 현재 세션을 읽는 클라이언트 컴포넌트 훅입니다. data(세션), status('loading' | 'authenticated' | 'unauthenticated'), update 함수를 반환합니다.

'use client';
import { useSession } from 'next-auth/react';

export function UserAvatar() {
  const { data: session, status } = useSession();
  if (status === 'loading') return <Spinner />;
  if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
  return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}

SessionProvider 설정

useSession이 세션 컨텍스트에 접근할 수 있도록 앱 전체 또는 클라이언트 컴포넌트 하위 트리를 SessionProvider로 감싸십시오.

// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
  return <html><body><Providers>{children}</Providers></body></html>;
}

Server Component에서 auth() 사용하기

Server Component에서는 auth()를 직접 사용하시면 됩니다. 훅이나 제공자가 필요하지 않으며, 서버의 쿠키에서 세션을 읽습니다.

import { auth } from '@/auth';

export default async function Header() {
  const session = await auth();
  return (
    <nav>
      {session ? (
        <span>Hello, {session.user?.name}</span>
      ) : (
        <Link href="/login">Sign in</Link>
      )}
    </nav>
  );
}

클라이언트 경로 보호하기

useSession에 required: true 옵션을 사용하면 인증되지 않은 사용자를 로그인 페이지로 자동 리디렉션할 수 있습니다.

'use client';
import { useSession } from 'next-auth/react';

export default function ProtectedPage() {
  const { data: session } = useSession({ required: true });
  // session is never null here — unauthenticated users are redirected
  return <div>Welcome, {session?.user?.name}</div>;
}

세션 업데이트하기

useSession이 반환하는 update() 함수를 호출하면 로그아웃한 후 다시 로그인하지 않고도 세션을 새로 고칠 수 있습니다. 예를 들어 프로필을 업데이트한 후 사용할 수 있습니다.

const { data: session, update } = useSession();

async function handleNameChange(newName: string) {
  await updateUserName(newName); // API call
  await update({ user: { name: newName } }); // refresh session
}

JSON 웹 토큰 세션 콜백

jwt 콜백을 사용하면 로그인할 때 사용자 지정 데이터를 JSON 웹 토큰에 추가할 수 있고, session 콜백을 사용하면 해당 데이터를 세션 객체에 노출할 수 있습니다.

callbacks: {
  async jwt({ token, user }) {
    if (user) token.role = user.role; // add on first sign-in
    return token;
  },
  async session({ session, token }) {
    session.user.role = token.role as string;
    return session;
  },
},

세션 만료

Auth.js config에서 세션의 최대 수명을 설정합니다. JSON 웹 토큰 세션은 활성 상태일 때 각 요청마다 자동으로 새로 고쳐집니다.

export const { handlers, auth } = NextAuth({
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60,   // refresh if older than 1 day
  },
});

데이터베이스 세션 무효화하기

데이터베이스 세션은 서버에서 폐기할 수 있으므로 강제 로그아웃에 유용합니다. 데이터베이스에서 세션 레코드를 삭제하면 즉시 무효화됩니다.

// Server Action to log out all devices:
async function logOutAllDevices() {
  'use server';
  const session = await auth();
  if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
  redirect('/login');
}

클라이언트 컴포넌트에서 역할 기반 접근 제어

useSession에서 세션의 역할을 읽고, 그 역할에 따라 사용자 인터페이스를 조건부로 렌더링합니다.

const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';

return (
  <>
    {isAdmin && <AdminPanel />}
    <UserContent />
  </>
);

빠른 확인

클라이언트 컴포넌트에서 useSession()이 작동하려면 어떤 제공자가 앱을 감싸야 합니까?

복습

Server Component에서 세션에 접근할 때는 auth()를 사용하고, SessionProvider로 감싼 클라이언트 컴포넌트에서는 useSession()을 사용합니다. JSON 웹 토큰 및 세션 콜백으로 사용자 지정 데이터를 추가하고, 클라이언트에서 update()로 세션을 업데이트하며, 세션 만료를 위해 maxAge를 설정하시면 됩니다.

자주 묻는 질문

“세션 관리와 useSession 훅” 강의는 무료인가요?

네 — “세션 관리와 useSession 훅” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“세션 관리와 useSession 훅”에서 뭘 배우나요?

서버 및 클라이언트 컴포넌트에서 세션 데이터에 접근하고 인증 상태에 따라 페이지를 보호합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“세션 관리와 useSession 훅” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기