inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Next.js vừa miệng, cắt nhỏ để ăn

2.8) Thiết lập bố cục cho từng trang

컴포넌트와 레이아웃

Đã giải quyết

67

eojine294

1 câu hỏi đã được viết

0

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

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

react typescript next.js

Câu trả lời 2

0

winterlood

안녕하세요 eojine294님 이정환입니다.

좋은 질문 감사합니다. 비슷한 질문이 이전에 들어와 답변을 드린적이 있는데 한번 참고해보시고 추가로 궁금하시거나 의문이 드는 점 답글 남겨주시면 감사하겠습니다 😀

https://inf.run/giZUn

0

communityai8509

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

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

컴포넌트 vs 레이아웃

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

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

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

각 접근법 선택 기준

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

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

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

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

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

에러핸들링- rootlayout에 관하여

0

29

2

버셀로 서버 배포 후 접속 시 500 에러 발생

0

91

2

@/styles/globals.css'

0

69

2

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

0

86

2

next.js 프로젝트

0

83

1

Next.js + Tanstack Query BFF 구조 질문

1

99

2

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

0

95

2

모달 관련 질문

0

104

3

렌더링 관련 질문

0

120

2

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

0

110

2

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

0

105

2

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

0

121

2

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

0

145

3

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

0

170

3

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

0

110

2

getServerSideProps 함수와 SSR의 관계

0

133

6

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

0

101

2

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

0

154

2

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

0

128

2

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

0

111

2

배포 시 오류 발생

0

129

2

백엔드 서버 오류납니다.

0

122

2

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

0

124

1

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

0

139

1