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

squirrel PARK님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

레이아웃 클론하기

server ,client 컴포넌트 랜더링 질문입니다!

해결된 질문

24.07.14 16:10 작성

·

141

·

수정됨

1

안녕하세요~

직접 만들어보고 비교하려고하는데 의문점이 하나 생겨서요!

서버컴포넌트로 Link를 생성하고

useSelectedLayoutSegment로 active클래스 처리해주려고 합니다!

export default function SideBar() {
  const links = [
    { path: "/home", pathName: "Home" },
    { path: "/", pathName: "탐색하기" },
    { path: "/", pathName: "쪽지" },
    { path: "/", pathName: "프로필" },
  ];

  return (
    <div className={classes.nav}>
      <div>logo</div>
      <nav>
        <ul>
          {links.map((link, idx) => {
            return (
              <li key={`${link}-${idx}`}>
                <SideLink href={link.path}>{link.pathName}</SideLink>
              </li>
            );
          })}
        </ul>
      </nav>
      <button className={classes.btn}>게시하기</button>
    </div>
  );
}

interface SideLinkProps {
  children: ReactNode;
  href: string;
}

export default function SideLink({ children, href }: SideLinkProps) {
  const segment = useSelectedLayoutSegment();
  const isSegment = href.slice(1);

  return (
    <Link
      href={href}
      className={segment === isSegment ? classes.active : undefined}
    >
      {children}
    </Link>
  );
}

근데 랜더링이

Sidebar가 서버에서 초기 랜더링 하고

client에서 class 반영한다 라고 이해하고 있는데용

브라우저에서 "페이지 소스보기"를 했더니

이미 class에 active가 반영된 상태로 랜더링 되어있어요

캐시도 지우고 빌드해서 npm start 해봐도 "/home" path에서 소스보기 했더니 class가 반영된 상태로 서버에서 랜더링 되어옵니다.

hook에 의한 할당될 class는 비워진 상태로 html를 생성하고 이후 client에서 hook을 이용한 클래스 부여가 된다고 알고 있었는데

왜 서버에서 세그먼트 훅에 의한 class 처리가 되서 오는건지 궁금합니다!

검색해도 명확한 답이 없어서 질문드려요!

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 07. 14. 17:19

서버에서도 클라이언트 컴포넌트가 1회 실행됩니다. 그 때 class가 반영되었을 겁니다!

squirrel PARK님의 프로필 이미지
squirrel PARK
질문자

2024. 07. 14. 18:22

아하 useSelectedLayoutSegment 이게 좀 특별한가보네용 감사합니다!

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 07. 14. 18:48

아, 훅들도 1회씩은 실행됩니다.