저 같은 경우에는 프론트엔드 개발을 할 때, 컴포넌트나 훅의 최소 관리단위로 파일을 사용하는 이유는 아래와 같습니다.

1. 테스트 용이성.

즉, 하나의 모듈에 하나의 유닛 테스트를 매칭하기 쉽습니다.

프론트엔드 개발은 순수함수를 통한 패러다임이 주를 이룬다고 생각하는데, 하나의 파일 안에 여러개의 함수가 존재하면 유닛 테스트를 작성할 시 1대1 매칭이 어렵습니다.

만약, remark-plugin.js 라는 하나의 파일안에 여러개의 유틸리티 함수가 존재한다면 테스트를 어떻게 작성해야 할까요? remark-plugin.test.js 파일을 하나만 만들어 여러개의 유틸리티 함수들에 대한 테스트를 일괄적으로 작성하는것이 좋은 선택일까요?

이러한 상황에서 remark-plugins라는 디렉토리를 만들고 그 안에 유틸리티 함수들을 하나씩 쪼개서 분리하여 테스트를 작성한다면, 추후에 함수 역할을 좀 더 명확하게 할 수 있고, 깃허브 커밋 추적도 훨씬 깔끔해지는 등의 이점이 있다 생각합니다.

2. 디렉토리 구조화

서버 개발에서의 commonjs 혹은 클라이언트에서의 webpack 등의 모듈 번들러는 index.js 파일을 특정 디렉토리의 입구 파일로 지정하는 경우가 많습니다. 이는 예전 부터 자주 사용되어오던 관습이기도 해서 그냥 받아들여 사용하는 이유도 일부 있습니다.

하지만 제 생각에 가장 중요한 이유는, 함수형 프로그래밍의 순수 함수 패러다임에서는 외부 상태에 의존하면 안되기에, 하나의 파일에 여러 함수들이 몰려있으면 외부 상태를 참조하는 실수가 발생할 확률이 높아진다 생각합니다. (ES6에서 모듈 스코프가 등장한 이유를 생각해보시면 좋을 것 같습니다.)

3. 커밋 추적의 용이성.

개인적으로 하나의 파일 안에 여러개의 유틸리티 함수들이 섞여있는 것 보다, 각각의 파일로 함수들이 쪼개져 있으면 커밋 히스토리 추적이 훨씬 간단해지는 것 같습니다.

어떤 모듈에서 기능이 추가되거나 버그가 수정되었을 때, 다른 모듈을 참고할 필요 없이 하나의 모듈에만 집중하면 되니까요.

쓰다보니 글이 길어져서 좀 두서없이 써졌네요. (아직 트리 쉐이킹 관련해서는 제 이해도가 낮은지라 말을 아끼도록 하겠습니다... ) 물론, 제 말이 정답이 아닐 수도 있기때문에 참고용으로 봐주시면 좋을 것 같습니다!