useSelectedLayoutSegment 의 사용법
useSelectedLayoutSegment 를 DetailPage 안의 infoData 라는 컴포넌트에서 사용하려하였고,
클라이언트 컴포넌트입니다.
useSelectedLayoutSegment은 layout.tsx 에서 infoData 를 부를때만 사용할수있는건가요?
layout.tsx 에서 infoData 를 불러오면 segment를 잘 가져오고 DetailPage 라는 곳에서 infoData를 사용하면 segment 가 null로만 반환되고있습니다.
Layout의 children으로 DetailPage가 들어가고 DetailPage의 children으로 infoData가 들어가는데
layout.tsx 에서 직접 컴포넌트를 불러올때만 값을 받아오고 layout의 자식의 자식으로 사용될때에는 왜 값을 가져오지 못하는건지 이해가 안되서 질문드립니다.
답변 1
0
layout이 아니어도 호출할 수 있습니다. 그런데 layout이랑 같은 경로에서 조회하신 거 아닌가요? DetailPage에 layout이 있으면 null이 뜹니다.
https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment#returns
layout에서 import한 컴포넌트에서 사용해야 하고, page에서는 무조건 null 뜹니다.
0
## 폴더구조 ##
├─ (afterLogin)
│ ├─ _components
│ │ ├─ InfoData.tsx
│ │
│ │
│ ├─ home
│ │ ├─ _components
│ │ │ ├─ Detail.tsx
│ │ │
│ │ ├─ [id]
│ │ │ ├─ page.tsx
│ │ │
│ │ ├─ page.tsx
│ │
│ │
│ └─ layout.tsx
## layout.tsx
export default function AfterLoginLayout({
children,
}: PropsWithRequiredChildren) {
return <Layout>{children}</Layout>;
}
## _components/InfoData.tsx
const InfoData = () => {
const segment = useSelectedLayoutSegment();
console.log(segment);
}## home/[id]/page.tsx
const DetailPage = () => {
return (
<>
<DetailPageHeader />
<DetailPageBody>
<Detail />
</DetailPageBody>
</>
);
};
export default DetailPage;## home/_components/Detail.tsx
const Detail = () => {
return (
<div className={styles.detailWrap}>
<div className={styles.detailArea}>
<ReservationInfo/>
</div>
</div>
);
};현재 구조가 이런식으로 되어있습니다.
DetailPage에 layout이 따로 있지는 않은데
layout과 _components 과 같은 형제 구조로 되어있어서 그런건가요 그러면?
0
https://github.com/vercel/next.js/pull/42299
아, page에서 클라이언트 컴포넌트 임포트해서 useSelectedLayoutSegment 쓰신 거군요. 그러면 null이 뜨는 게 맞습니다.
layout에서 클라이언트 컴포넌트 임포트해서 useSelectedLayoutSegment 쓰셔야 합니다.
0
답변 감사합니다.
현재 구조를 가지고가고싶으면
layout에서 클라이언트 컴포넌트 임포트해서 useSelectedLayoutSegment 를 사용하지 않고
usePathName으로 사용하는게 맞는 방법이라고 생각하면될까요?
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
132
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2