react 컴포넌트 작게 쪼갤경우에 파일을 분리하는게 좋나요?

Question

현재 공통으로 사용되지않고, 하나의 page에서만 사용되는 컴포넌트들의 경우 pages폴더의 signUp 폴더에서 (회원가입 페이지의 경우) 계층으로 작성하고있습니다.

단일책임원칙에 따라 하나의 컴포넌트가 하나의 일만 하도록 작게 쪼개고있는데, 폴더의 뎁스도 늘어나고 파일이 너무 많아지는거같아 이렇게 하는 방식이 옳은것인가? 라는 의문이 들어 질문을 작성합니다.

이처럼 컴포넌트를 하나의 일만 하도록 최대한 작게 쪼개는게 옳은 방식인지... 그렇다면 폴더를 계층으로 쪼개는게 맞는건지... 알려주시면 감사하겠습니다 !

한가지 예시
signUp/content /form / buttonGroup.tsx 요런식입니다

이상래 · Answer

안녕하세요, 해당 질문에 대한 개인적인 생각을 적어볼게요.

컴포넌트를 단일책임원칙(Single Responsibility Principle)에 따라 작게 쪼개는 것은 일반적으로 좋은 접근입니다. 그러나 컴포넌트를 너무 작게 쪼개는 것이 항상 최선은 아닙니다.

그리고 몇가지 체크 해야 할 것이 있어 보입니다.

1. 일단 컴포넌트가 복잡하고 여러 가지 기능을 수행 한다면, 쪼개는 것이 좋습니다.
그러나, 너무 작게 쪼개서 컴포넌트 간의 의존성이 높아지거나, 이해하기 어려워진다면 다시 합치는 것이 좋습니다.

2.너무 깊은 폴더 구조는 오히려 파일을 찾기 어렵게 만들 수 있습니다.
컴포넌트를 폴더로 나누는 기준은 해당 컴포넌트가 해당 폴더에서 관리하는 부분과 밀접하게 관련이 있을 때 적절합니다.
폴더를 나눌 때는 기능별로 그룹화하는 것이 좋으며, 한 페이지에서만 사용되는 컴포넌트라면 해당 페이지 안에 위치시키는 것이 일반적입니다.

3. 만약 나눈 작은 컴포넌트들이 다른 페이지나 다른 프로젝트에서도 사용될 가능성이 있다면, 재사용 가능한 컴포넌트로 잘라내는 것이 좋습니다.

가독성과 유지보수성을 고려하여 너무 세밀하게 쪼개지 않는 것이 좋습니다.
항상 올바른 프로젝트 구조는 없으며 지금은 이렇게 해보고 불편함을 느끼고 다음 프로젝트 때 그 불편했던 기억을 개선해서 더 좋게 하는 경험이 많을수록 좋은 프로젝트 구조를 만들수있습니다. 매우 잘하고 계십니다.

이상 개인적인 생각을 적어봤습니다.

응원하겠습니다. 화이팅 😎😎