해결된 질문
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 처리가 되서 오는건지 궁금합니다!
검색해도 명확한 답이 없어서 질문드려요!
2024. 07. 14. 18:22
아하 useSelectedLayoutSegment 이게 좀 특별한가보네용 감사합니다!