9 asked

0

안녕하세요 🙂

좋은 질문입니다! src/components와 src/app/_components의 차이와 사용 이유를 설명해드리겠습니다.

주요 차이점

src/components (전역 폴더)

• 프로젝트 전체에서 재사용되는 컴포넌트

• 여러 페이지/라우트에서 공통으로 사용

• 예: Header, Footer, Button, Modal 등

src/app/_components (Private 폴더)

• 언더스코어(_)로 시작하는 폴더는 Next.js 라우팅에서 제외됨

• 해당 라우트 세그먼트 내부에서만 사용하는 컴포넌트

• 페이지 URL에 영향을 주지 않음

분리하는 이유

1. 명확한 스코프 관리

src/
├── components/          # 전역 재사용 컴포넌트
│   ├── Header.tsx
│   └── Button.tsx
└── app/
    ├── blog/
    │   ├── _components/  # blog 페이지에서만 사용
    │   │   └── BlogCard.tsx
    │   └── page.tsx
    └── about/
        ├── _components/  # about 페이지에서만 사용
        │   └── TeamMember.tsx
        └── page.tsx

2. 코드 조직화와 유지보수

• 컴포넌트가 어디서 사용되는지 명확히 알 수 있음

• 특정 페이지 수정 시 해당 _components만 확인하면 됨

3. 의존성 관리

• 전역 컴포넌트 수정 시 영향 범위가 넓음

• Private 컴포넌트는 영향 범위가 제한적

사용 가이드라인

하나만 사용해도 되는 경우:

• 작은 프로젝트

• 재사용 컴포넌트가 많지 않을 때

• 팀 규모가 작을 때

분리가 권장되는 경우:

• 대규모 프로젝트

• 여러 개발자가 협업할 때

• 페이지별로 독립적인 컴포넌트가 많을 때

결론

반드시 분리할 필요는 없습니다. 프로젝트 규모와 팀의 선호도에 따라 선택하면 됩니다.

• 간단한 프로젝트: src/components만 사용

• 복잡한 프로젝트: 두 가지 모두 활용하여 명확한 구분

제 개인적인 추천은 처음에는 src/components만 사용하다가, 특정 페이지 전용 컴포넌트가 많아지면 그때 _components를 도입하는 것입니다.

0

안녕하세요, 인프런 AI 인턴입니다. Junho님.

Next.js 프로젝트에서 폴더 구조와 컴포넌트 관리 방식은 프로젝트의 유지보수성과 확장성에 큰 영향을 미칩니다. 질문해주신 내용에 따라, 다양한 컴포넌트 관리 방식의 장단점을 통해 답변을 드리겠습니다.

src/components vs. src/app/_components 폴더

1. src/components:

   • 공용 컴포넌트를 모아두는 경우가 많습니다. 프로젝트 내 여러 곳에서 재사용할 수 있는 컴포넌트를 여기에 배치합니다.
     
   • 이 구조는 공통 UI 요소를 관리하기에 적합하고, 일관성을 유지하기 쉬워 다른 프로젝트에도 쉽게 복사하여 사용할 수 있습니다.
     

2. src/app/_components:

   • 특정 페이지 전용의 컴포넌트를 두는 경우가 많습니다. 특정 앱이나 페이지와 강하게 연관된 컴포넌트들이 위치합니다.
     
   • 각 앱이나 페이지에서만 사용되는 경우 유지보수와 디버깅이 더 수월해집니다.
     

왜 분리하나요?

• 모듈화와 명확성: 폴더 구조를 통해 컴포넌트의 사용 범위를 명확하게 해주어, 어떤 컴포넌트가 공용인지, 특정 기능 전용인지 쉽게 드러냅니다.
  
• 관리 용이성: 프로젝트가 커질수록 컴포넌트 개수가 증가하고 그에 따라 관리의 복잡성이 올라갑니다. 별도의 폴더로 나누어 관리하면 특정 변경 사항이 미칠 영향을 쉽게 파악할 수 있게 도와줍니다.
  
• 협업 편의성: 폴더 구조가 명확할수록 팀원들 간의 협업이 더 원활해집니다.
  

결론적으로, 굳이 분리하여 사용하는 이유는 프로젝트의 복잡성에 따라 그 이점을 볼 수 있기 때문입니다. 하지만 개인 프로젝트와 같이 프로젝트의 규모가 작을 때는 단일 경로를 사용할 수도 있습니다.

추가적으로 관련된 질문과 답변은 다음 인프런 게시물을 참고해 보세요:

• 프로젝트 구조에 대한 질문
  

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