폴더 구조 관련 질문

Question

제로초님 안녕하세요 expo 프로젝트의 폴더 구조에 대해서 고민이 있습니다.!! 현재 src/app 폴더에서 페이지들을 관리하고 있고 각 페이지 내부에서만 사용하는 하위 컴포넌트들은 src/app/settings/_components/AccountSettingsSection.tsx 와 같이 _components 폴더 하위에 배치하고, named export를 통해 라우트로 잡히지 않게 하고 있습니다. 문제는 없지만 프로젝트를 실행시키면 WARN Route "./settings/_components/AccountSettingsSection/AccountSettingsSection.tsx" is missing the required default export. Ensure a React component is exported as default. 라는 경고 메시지가 app/ 내부에서 named export 한 모든 하위 컴포넌트를 대상으로 출력됩니다. Next.js처럼 _components 내부의 하위 컴포넌트들은 완전히 무시하도록 하고 싶은데 아무리 찾아봐도 무시할 방법이 없는 거 같습니다 ㅠ   제로초님께서는 어떤 방법으로 페이지 내부 하위 컴포넌트들을 배치하시는지 궁금합니다..!! 관리하기 용이한 폴더 구조가 있다면 추천해주실 수 있으신가요??

zerocho · Answer

워닝이라서 무시하셔도 되긴 합니다. 엑스포에서 app 폴더 안에서 발생하는 과한 워닝입니다. 워닝을 꼭 없애시려면 expo쪽에서 패치해주지 않는다면 app폴더 바깥으로 꺼내는 방법밖에는 없습니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 이영훈님께서 expo 프로젝트의 폴더 구조 및 경고 메시지와 관련하여 고민이 있으신 점 이해합니다. Next.js와는 달리 React Native with Expo 프로젝트에서는 특정 폴더나 파일을 무시하도록 설정하는 방식이 따로 존재하지 않기 때문에, React Native 특성에 맞춘 폴더 구조 관리가 중요합니다. 폴더 구조 관리 : 현재 이영훈님께서 사용하시는 것처럼 _components 와 같은 특수 폴더를 만드는 것은 좋습니다. 그러나 named export 대신 default export 를 사용하거나 하위 컴포넌트들에 대해서는 별도의 components 폴더를 만들어 관리하는 방법도 고려해보실 수 있습니다. 이를 통해 _components 폴더를 React Native에서는 단순 추상화 레이어로 사용하게 됩니다. 경고 메시지 해결 : default export 미사용으로 인한 경고 메시지를 피하기 위해 프로젝트의 eslint 설정에서 해당 경고를 무시하도록 설정하는 방법을 고려할 수 있습니다. .eslintrc 파일에 경고를 무시할 규칙을 추가해 주세요. 또한, components 폴더 내에서 다른 컴포넌트에서 사용하지 않는 React 컴포넌트의 경우 경고 메시지가 발생하지 않도록, default export 로 변환하여 예상지점에 경고가 생기지 않도록 할 수 있습니다. 유사한 Q&A 확인하기 : 관련될 수 있는 질문과 답변 예시를 찾지 못했지만, 서브 컴포넌트의 관리법-폴더 구조에 대한 고민 이라는 게시글에서 컴포넌트별 폴더구조에 대한 제안이 언급된 적이 있습니다. 이 게시글에서는 여러 컴포넌트를 관리하는 데 있어서의 폴더 배치 방법을 논의하였습니다. 이러한 추천 사항들을 참고하셔서 프로젝트 폴더 구조를 한층 깔끔하게 관리하실 수 있길 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.