private folders 와 전역 폴더

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

블로그 메인 UI 2

작성

프로젝트 개발 중에, src/components 폴더에 재사용할 것들을 만들어서 사용하는 것과, src/app/_components 를 사용하는 것을 배웠는데, 둘의 사용성 차이가 있나요? 굳이 이 두 기능을 둘 다 사용을 할 필요가 있을까요? 오히려 하나만 사용하는게 좋지 않나 싶었습니다. 반드시 분리를 해야만 하는 특별한 이유가 있어서 굳이 분리를 하게 되는 것일까요?

react 블로그 next.js cursor cursorai

답변 2

짐코딩

지식공유자

안녕하세요 🙂

좋은 질문입니다! 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를 도입하는 것입니다.

인프런 AI 인턴

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

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

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

src/components:
- 공용 컴포넌트를 모아두는 경우가 많습니다. 프로젝트 내 여러 곳에서 재사용할 수 있는 컴포넌트를 여기에 배치합니다.
- 이 구조는 공통 UI 요소를 관리하기에 적합하고, 일관성을 유지하기 쉬워 다른 프로젝트에도 쉽게 복사하여 사용할 수 있습니다.
src/app/_components:
- 특정 페이지 전용의 컴포넌트를 두는 경우가 많습니다. 특정 앱이나 페이지와 강하게 연관된 컴포넌트들이 위치합니다.
- 각 앱이나 페이지에서만 사용되는 경우 유지보수와 디버깅이 더 수월해집니다.

왜 분리하나요?

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

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

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

프로젝트 구조에 대한 질문

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

인프런 커뮤니티 질문&답변