혹시 일반적인 방법이 무엇일까요?

한 입 크기로 잘라먹는 Next.js(v15)

작성

예를 들어 로그인이 되지 않는 경우는 메뉴가 굳이 나올필요가 없어서..

세션이 미존재면 보이지 않게 처리 했는데....

이렇게 처리하는 방법이 일반적이지는 않을거 같은데....

보통 로그인이 되지 않아 메뉴가 필요 없는 페이지는 어떻게 처리하나요?

export default async function RootLayout({
  children
}: Readonly<{
  topmenu: React.ReactNode;
  children: React.ReactNode;
}>) {

  const cookie = (await cookies()).get("session")?.value;
  const session = await verify(cookie);

  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {/*
          세션이 undefined가 아닌 경우 TopNavigationMenu를 렌더링합니다.
          'undefined'는 문자열이 아닌 JavaScript의 실제 undefined 값입니다.
        */}
        { session!==undefined&&<TopNavigationMenu/> }
        <main>
        {children}
        </main>
      </body>
    </html>
  );
}

react typescript next.js 카카오공채-개발

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

세션의 존재 유무에 따라 다른 ui를 렌더링해야 할 때에는 첨부하신 코드처럼 작업하셔도 충분합니다!

다만 쿠키로부터 세션을 불러오는 코드가 RootLayout내에 있을 경우 이 앱 내부의 모든 페이지가 풀라우트 캐시가 적용되지 않는 동적 페이지로 강제 설정된다는 문제점이 있습니다.

따라서 조금 더 좋은 방법으로는 TopNavigationMenu 컴포넌트를 클라이언트 컴포넌트로 설정하신 다음, 해당 컴포넌트 내부에서 쿠키에 보관된 세션 정보를 불러와 조건부로 렌더링 하도록 처리하시는게 좋을듯 합니다

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Shoncg님, 질문해주셔서 감사합니다!

로그인 상태에 따라 UI 요소를 렌더링하거나 숨기는 것은 웹 애플리케이션 개발에서 매우 일반적인 패턴입니다. 특히 사용자 친화적인 인터페이스를 제공하기 위해, 로그인이 필요한 기능이나 메뉴를 사용자에게 보이지 않게 하는 것은 좋은 방법입니다.

일반적인 로그인 상태 관리 방법

상태 관리: 로그인 상태를 전역적으로 관리하기 위해 Context API, Redux, Recoil 등 상태 관리 라이브러리를 사용합니다. 이렇게 하면 어떤 컴포넌트에서도 로그인 상태에 접근할 수 있습니다.
세션 검증: 페이지를 렌더링할 때마다 세션이 유효한지를 확인하고, 이 반환값에 따라 사용자에게 표시할 내용을 결정합니다.
조건부 렌더링: 로그인된 사용자와 그렇지 않은 사용자에 따라 다른 UI 요소를 조건부로 렌더링합니다. 예를 들어, 로그인된 사용자가 아니라면 네비게이션 메뉴를 생략하거나 “로그인” 버튼을 표시합니다.
보안: 중요한 콘텐츠는 클라이언트에서만 제어하지 않고 서버 측에서도 검증합니다. 예를 들어, 중요한 API 호출 전에 항상 세션 토큰을 서버에서 검증합니다.

질문에 대한 예시 코드 설명

제공하신 코드에서, 세션 값이 undefined 가 아닐 경우에만 TopNavigationMenu 를 보여주는 방법은 조건부 렌더링의 한 예입니다. 이것은 세션 값이 존재할 경우에만 특정 컴포넌트를 사용자에게 보여주고, 그렇지 않다면 비워두는 방식으로, 실제로 일반적으로 사용되는 방법입니다.

아래 게시물도 참고하시면 도움이 될 것입니다:
- “getLayout을 왜 사용하는 건가요?? (5:20)”

위 링크에서는 페이지별로 다르게 UI 요소를 렌더링하는 방법을 심도 있게 다루고 있습니다. 정보가 도움이 되었으면 좋겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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