inflearn logo
강의

講義

知識共有

一口サイズでかじり取るNext.js

2.8) ページごとのレイアウトを設定する

컴포넌트와 레이아웃

3

eojine294

投稿した質問数 1

0

searchbar를 일부 페이지에만 적용할 수 있는 레이아웃으로 설정하셨는데 그냥 컴포넌트로 만들어서 재사용할 수도 있었을 것 같아요

(일부)페이지 레이아웃과 컴포넌트로 적용할 때 각각 어떤 차이가 있고 선택할 때 어떤 기준을 가지고 선택하는지 궁금합니다.

react typescript next.js

回答 1

0

communityai8509

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

Next.js에서 레이아웃을 설정하는 방법에는 여러 접근법이 있으며, 이는 개발자의 필요와 선호에 따라 선택할 수 있습니다. 질문하신 컴포넌트와 레이아웃으로 구분하는 이유에 대해 설명드리겠습니다.

컴포넌트 vs 레이아웃

  1. 컴포넌트로 사용하는 경우:

    • 재사용성: 컴포넌트는 특정 UI 조각을 재사용하기 좋습니다. 특정 페이지나 여러 페이지에서 동일하게 사용할 UI 요소일 경우 컴포넌트로 사용하는 것이 더 적합합니다.
    • 단일 책임성: 컴포넌트는 일반적으로 단일 책임을 가집니다. 즉, 명확한 목적을 가진 UI 요소를 만들어 재사용할 때 유리합니다.
  2. 레이아웃으로 사용하는 경우:

    • 상태 유지: 페이지 이동 시에도 특정 상태를 유지하고 싶다면 레이아웃을 사용하는 것이 좋습니다. 레이아웃은 페이지 이동 간에도 유지되므로 상태가 초기화되지 않습니다.
    • 구조적 분리: 페이지에 따라 다르게 적용되는 UI 또는 상위 구조를 정의할 때 유용합니다. getLayout 메서드를 통해 개별 페이지마다 다른 레이아웃을 쉽게 적용할 수 있습니다.

각 접근법 선택 기준

  • 재사용 여부: 여러 페이지에 걸쳐 유사하게 사용되지만 페이지 이동 시 상태 유지가 필요 없다면 컴포넌트를 선택하는 것이 좋습니다.

  • 상태 유지를 해야 하는 경우: 동일 레이아웃을 가진 페이지 간의 이동 시 상태를 유지해야 한다면 레이아웃으로 관리하는 것이 더 효율적입니다.

  • 유지보수와 확장성: 프로젝트가 커지고, 여러 다른 레이아웃을 관리해야 하는 경우, getLayout 메서드를 사용한 레이아웃 관리가 더 유리할 수 있습니다.

질문에서 제기된 두 가지 접근법 각각의 장단점을 잘 이용해, 프로젝트의 특성에 맞게 선택하시는 것이 중요합니다. 추가적으로 비교 분석이나 다른 관련 질문은 “getLayout을 왜 사용하는 건가요?? (5:20)”를 참고하시면 더 깊이 있는 이해가 가능할 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

@/styles/globals.css'

0

25

2

풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문

0

58

2

next.js 프로젝트

0

57

1

Next.js + Tanstack Query BFF 구조 질문

1

62

2

Next.js 사전렌더링 이해하기 부분

0

62

2

모달 관련 질문

0

62

3

렌더링 관련 질문

0

92

2

중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화

0

80

2

라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.

0

79

2

SSR시 context에 params말고 query를 사용하면 안되나요?

0

93

2

npx prisma db push 시 에러가 뜹니다.

0

112

3

vercel 배포를 실패하였습니다.

0

125

3

Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?

0

76

2

getServerSideProps 함수와 SSR의 관계

0

92

6

없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다

0

72

2

실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.

0

130

2

일반적인 nextjs project architecture에 대하여..

0

99

2

2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?

0

83

2

배포 시 오류 발생

0

102

2

백엔드 서버 오류납니다.

0

99

2

취약점 제거시 nestjs 버전 문제가 생길까요?

0

105

1

eslint.config.mjs 내 rules 어떻게 설정 하나요?

0

115

1

[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.

0

70

2

빨간줄 설정

0

94

3