리액트에서 components 폴더를 어떤 기준으로 구분해야 할까요?

그렇게하시면 될것 같아요

우선 페이지와 컴포넌트가 해깔리신다면 페이지를 하나의 레고 작품이고 컴포넌트는 레고 조각이라고 이해하시면 좋을거 같습니다. 프론트엔드의 폴더구조는 팀마다 다른 경우가 워낙 많아서 좀 조심럽지만 오픈된 곳을 기준으로 참고하자면 아래와 같은 자료가 있습니다. https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md https://www.robinwieruch.de/react-folder-structure/ https://www.freecodecamp.org/news/a-better-way-to-structure-react-projects/ 일단 pages 폴더에 페이지 단위의 폴더를 만들어 관련된 컴포넌트들을 그곳에서 관리하면 문제는 페이지폴더 기준으로 라우터를 자동으로 만들기 때문에 필요치 않는 페이지들이 생성됨으로 비추천드리며 components에 pages폴더들의 라우터들 이름 그대로 폴더를 만들어서 사용하면 될거 같고 말씀하신 components안에 common은 버튼 등의 공통적으로 사용하면 되는 것으로 넣으심 될거 같습니다. 컴포넌트를 만들다보면 컴포넌트는 아닌데 화면에서는 좀 더 나눠야 되겠다 생각이 드신다면 아래의 아토믹 글을 보시면 됩니다. https://medium.com/@janelle.wg/atomic-design-pattern-how-to-structure-your-react-application-2bb4d9ca5f97 전 솔직히 아토믹대로 만든다는건 현실세계에선(디자인에선 가능하나 코딩에선 어려운) 어렵다고 생각하여서 템플릭이나 오가닉 개념을 containrs 폴더 안에 넣어서 처리하려고 하는 편입니다.

리액트에서 components 폴더와 pages 폴더의 구분은 프로젝트의 크기, 구조, 컴포넌트의 재사용성 등에 따라 다르게 결정될 수 있습니다. 하지만 일반적으로는 다음과 같은 기준으로 구분하는 것이 좋습니다. 1. components 폴더: 재사용 가능한 작은 단위의 컴포넌트를 저장하는 폴더입니다. 예를 들어, 버튼, 인풋박스, 모달 등의 컴포넌트들이 이에 해당됩니다. 이 폴더 내부에는 카테고리별로 폴더를 만들어서 관리할 수 있습니다. 예를 들어, common, form, layout, ui 등의 폴더를 만들어서 관련된 컴포넌트들을 그 폴더 안에 넣는 식으로 관리할 수 있습니다. 2. pages 폴더: 페이지 단위의 컴포넌트를 저장하는 폴더입니다. 예를 들어, 로그인 페이지, 회원가입 페이지, 대시보드 페이지 등의 컴포넌트들이 이에 해당됩니다. 이 폴더 내부에는 각 페이지별로 폴더를 만들어서 관리할 수 있습니다. 예를 들어, login, signup, dashboard 등의 폴더를 만들어서 관련된 컴포넌트들을 그 폴더 안에 넣는 식으로 관리할 수 있습니다. 위의 방식을 따르면, components 폴더와 pages 폴더의 구분이 명확하게 이루어지기 때문에, 복잡성이 늘어나는 일을 방지할 수 있습니다. 또한, 재사용성이 높은 컴포넌트들은 components 폴더에서 관리하고, 페이지 단위의 컴포넌트들은 pages 폴더에서 관리하면, 컴포넌트의 재사용성과 유지보수성이 높아질 수 있습니다.