useSelectedLayoutSegment 의 사용법

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

해결된 질문

24.01.02 15:56 작성

392

수정됨

useSelectedLayoutSegment 를 DetailPage 안의 infoData 라는 컴포넌트에서 사용하려하였고,

클라이언트 컴포넌트입니다.
useSelectedLayoutSegment은 layout.tsx 에서 infoData 를 부를때만 사용할수있는건가요?
layout.tsx 에서 infoData 를 불러오면 segment를 잘 가져오고 DetailPage 라는 곳에서 infoData를 사용하면 segment 가 null로만 반환되고있습니다.

Layout의 children으로 DetailPage가 들어가고 DetailPage의 children으로 infoData가 들어가는데
layout.tsx 에서 직접 컴포넌트를 불러올때만 값을 받아오고 layout의 자식의 자식으로 사용될때에는 왜 값을 가져오지 못하는건지 이해가 안되서 질문드립니다.

react next.js react-query next-auth msw

답변 1

제로초(조현영)

지식공유자

2024. 01. 02. 16:04

~~layout이 아니어도 호출할 수 있습니다. 그런데 layout이랑 같은 경로에서 조회하신 거 아닌가요? DetailPage에 layout이 있으면 null이 뜹니다.~~

https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment#returns

layout에서 import한 컴포넌트에서 사용해야 하고, page에서는 무조건 null 뜹니다.

밍끼

질문자

2024. 01. 02. 16:18

## 폴더구조 ##
├─ (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 과 같은 형제 구조로 되어있어서 그런건가요 그러면?