View - Component / SASS Structure

[jejecrunch]

(샘플 데이터는 src 밖에 있어서 가져와서 쓸 수가 없어서 우선적으로 복사만 해둔 상태이고 이후에 삭제 예정입니다.)

저는 위 이미지처럼 컴포넌트 파일로만 우선 분리했는데 다른 팀은 어떻게 컴포넌트를 분리하셨는지 궁금합니다.
예를 들어 VerticalClusterList 폴더 안에 컴포넌트별로 폴더 나눠서 관리할 수도 있고, 파일로도 관리할 수 있다고 생각합니다!
또 scss 파일은 어떻게 관리하고 계신가요?

저는 우선 feature별로 맡은 역할에 따라 폴더 나누고 그 안에 맡은 기능의 컴포넌트 파일, scss 파일 이렇게 1차적으로 가면 좋겠다는 생각이 드네요.
(구현에 더 많은 cost를 드는 게 맞는 시점인 것 같다고 생각해서 우선 이런 식으로 ...)
그외에 또 의견 내주시면 협의 후 방식을 정하는 것도 괜찮을 것 같습니다.

[jin-Pro]

Summary에 관한 scss와 VerticalClusterList에 관한 scss도 분리해주어야 할 것 같은데,
VerticalClusterList/Summary/Summary.tsx
VerticalClusterList/Summary/Summary.scss
VerticalClusterList/Summary/index.ts
와 같이 폴더구조를 한 뎁스를 더 거쳐가는것은 별로일까요??

[jin-Pro]

이렇게 나누게 된다면

VerticalClusterList/VerticalClusterList/VerticalClusterList.tsx 가 될수도 있겠네요,,

[hanseul-lee]

저도 영진님과 같은 구조로 구현하고 있습니다. 메인 파일은 따로 하위 폴더를 만들지 않고 두었습니다.

[vgihan]

style 코드나 테스트 코드 등과 같이 컴포넌트와 별도로 함께 묶어야할 요소들이 있을 것이라고 생각해 한슬님 말씀대로 메인 컴포넌트는 하위 폴더를 두지 않되, 영진님 말씀대로 하위 컴포넌트들은 폴더로 묶는 것이 좋을 것 같습니다.

[jin-Pro]

넵!! 좋아여! 컴포넌트 네이밍도 어렵겠네요 ,,

[jejecrunch]

Summary에 관한 scss와 VerticalClusterList에 관한 scss도 분리해주어야 할 것 같은데, VerticalClusterList/Summary/Summary.tsx VerticalClusterList/Summary/Summary.scss VerticalClusterList/Summary/index.ts 와 같이 폴더구조를 한 뎁스를 더 거쳐가는것은 별로일까요??

그러면

VerticalClusterList/VerticalClusterList.tsx
VerticalClusterList/VerticalClusterList.scss
VerticalClusterList/Summary/Summary.tsx
VerticalClusterList/Summary/Summary.scss

이렇게 나누면 될까요?
제가 생각했을 때 하위로 들어가는 컴포넌트가 많지 않아서 index.ts가 굳이 사용하지 않아도 괜찮을 것 같은데 다른 분들은 어떠신가요?

[jin-Pro]

넵! 동의합니다 ㅎㅎ

그렇다면

VerticalClusterList/Summary/Summary.tsx
VerticalClusterList/Summary/Summary.scss
VerticalClusterList/Summary/index.tsx

를 의미하시는걸까요??

VerticalClusterList/Summary/Summary.scss
VerticalClusterList/Summary/index.tsx

를 의미하시는걸까요??

후자가 맞겠죠?

[jin-Pro]

후자라고 생각했던 이유는 Summary 폴더 내부에서 export해줄 파일이 Summary.tsx 뿐이라 후자라고 생각했습니다!

[jejecrunch]

Summary.tsx와 Graph.tsx의 경우 VerticalClusterList에서만 쓰이는 컴포넌트기 때문에 index.ts를 만들지 않아도 될 것 같다고 생각이 듭니다.
현업에서도 컴포넌트를 여러 군데에서 쓰지 않는 경우에도 index.ts를 매 컴포넌트마다 생성하는지 궁금하네요.

제가 이해한 바에 따르면 Summary 폴더 내 index.ts 내용은 다음과 같습니다. (Graph 폴더도 마찬가지)

export { default as Summary } from "./Summary";

Vertical Cluster List 폴더 구조는 아래와 같이 이해했습니다.

VerticalClusterList
ㄴSummary
　ㄴindex.ts
　ㄴSummary.tsx
　ㄴSummary.scss
ㄴGraph
　ㄴindex.ts
　ㄴGraph.tsx
　ㄴGraph.scss

[vgihan]

VerticalClusterList 컴포넌트 역시 감싸고 있는 컨테이너 크기나 padding, margin 등이 필요해보여 style코드가 필수적일 것 같습니다. 최종적으로는 아래와 같은 폴더구조가 나올 것 같은데 제가 생각한 부분이 맞을까요 ??

VerticalClusterList
ㄴSummary
　ㄴindex.ts
　ㄴSummary.tsx
　ㄴSummary.scss
ㄴGraph
　ㄴindex.ts
　ㄴGraph.tsx
　ㄴGraph.scss
ㄴVerticalClusterList.tsx
ㄴVerticalClusterList.scss
ㄴindex.ts

[hanseul-lee]

네 지혜님 구조로 말씀드린 것이 맞습니다.
여러 번 사용하는 컴포넌트뿐 아니라 다른 곳에서도 모두 위와 같은 구조로 통일해 쓰고 있습니다.
(너무 주관적일 수도 있어 비슷한 다른 레포도 추가로 찾아보았습니다. https://github.com/reactjs/reactjs.org/tree/main/src/components)

사실 실무 코드에 너무 익숙해져 있어서 이유를 깊게 생각해본 적은 없는데
제가 생각하기에 이유는 아래가 아닐까 싶습니다.
+) 사수분께 여쭤본 이유(3,4번)도 추가로 남겨보았습니다.

1. index.ts와 index.tsx 혼용으로 인한 혼란
   같은 index이지만 어느 곳에는 컴포넌트 어느곳에는 export 되는 코드가 담겨있게 됨
2. 파일 이름과 컴포넌트 이름의 매칭
   Summary.tsx에는 Summary가 담겨있음을 바로 파악 가능
3. 확장성
   Summary.tsx + Summary.style.tsx + Summary.type(interface).ts 및 Summary.stories.tsx, __ test__/Summary.spec.tsx 처럼 컴포넌트를 비롯해 관련된 각종 파일 등을 한꺼번에 import, export 하기 편함
4. 외부 노출 확인
   index 파일 하나에서 어떤 것이 외부로 노출되는 것인지 한눈에 확인 가능

재사용성은 저희의 거의 모든 컴포넌트가 재사용되는 곳이 없이 독립적으로 사용되는 것 같아 큰 고려사항은 아닌 거 같고
너무 depth가 깊어지는 게 싫다면 폴더를 나누지 않고 그냥 아래 구조로 가는 것도 괜찮을 것 같습니다.

VerticalClusterList
　ㄴ index.ts
　ㄴ Summary.tsx
　ㄴ Summary.scss
　ㄴ Graph.tsx
　ㄴ Graph.scss

하지만 이것 역시 제 짧은 생각일 수 있고 표준이 정해진 것이 아니니
혹 index.tsx에 컴포넌트를 담는 것이 더 좋은 것 같다 말씀주시면 그렇게 통일해 보는 것도 좋을 것 같습니다~

[jejecrunch]

위 discussion은 다음 폴더구조로 fix되었습니다.

VerticalClusterList 
 ㄴ index.ts
 ㄴ VerticalClusterList.tsx
 ㄴ VerticalClusterList.scss
 ㄴ VerticalClusterList.type.scss
 ㄴ Summary
     ㄴ index.ts
     ㄴ Summary.tsx
     ㄴ Summary.scss
     ㄴ Summary.util.ts
     ㄴ Summary.const.ts
     ㄴ Summary.type.ts
  ㄴ Graph
     ㄴ index.ts
     ㄴ Graph.tsx
     ㄴ Graph.scss
     ㄴ Graph.util.ts
     ㄴ Graph.const.ts