[폴더구조] 컴포넌트 쪼개기

[Hyevvy]

어제 팀원분들과 이야기하다가 컴포넌트를 atomic 하게 쪼개는게 좋겠다는 생각이 들었고, 이에 동의해주셨으나 그 자리에 계시지 않았던 팀원분들이 있기에 discussion에 정리해둡니다.

• 이 이야기로 빌드업하며 제가 논의하고 싶은 부분을 꺼내보겠습니다.

사건의 발단

원래의 Input 컴포넌트는 다음과 같았습니다.
label, input, errorMessage

그런데 제가 생성 / 수정 페이지에서 쓰는 Input은 다음과 같았습니다

저는 lable, input만 필요했던 것이죠

여기까지는 문제가 없습니다. errorMessage를 필수가 아닌 선택으로 넘기면 되니까요

그런데 다음과 같은 경우에는 문제가 생깁니다.

생성 / 수정 페이지에서 사용하는 select입니다.

이 경우에는 label 과 select가 필요하죠.

이렇게 되면 Input 컴포넌트와 Select 컴포넌트 둘 다에 label 이 필요함에도 label이 Input에 묶여있어서 사용할 수가 없습니다.

=> 그래서 Input컴포넌트를 <Label/> , <ErrorMessage/>, <Input />으로 쪼갰습니다.

그렇지만 기존에 Input 컴포넌트처럼 쪼갠 아이들을 합쳐서 쓰는 경우가 많은 컴포넌트들이 있습니다.
이를 매번 각자 페이지에서 합쳐쓰는 것보단 합쳐진 아이도 하나 만들어서 이를 import해서 쓰는게 더 좋아보입니다.

그럼 이 세 가지를 담은 새로운 Input 컴포넌트가 필요합니다. 쪼갠 컴포넌트를 합쳤을 때 이름이 문제입니다.

이렇게 atomic하게 쪼갠 컴포넌트를 합쳤을 때 이름을 무엇으로 할 지 �정했으면 좋겠습니다

• 이 부분에 대한 논의를 하고 싶습니다.
• 저는 개인적으로 Box를 붙였으면 좋겠습니다. ex) InputBox

또 다른 논의사항

또 다른 논의 사항이 생겼습니다. 제가 SelectBox(이름은 우선 이렇게 지었으나 논의를 통해 다른 의견으로 취합된다면 바꿀 예정입니다)를 만들다보니 <Label/>을 가져다써야만 했습니다. 그런데 이렇게 쪼갠 컴포넌트들이 <Common />이라는 폴더보다는 <Atom/>같은 폴더에 더 어울린다는 생각이 들었습니다. 이렇게 되면 쓸 때는 어디서 찾을 지 편하지만 Atom 폴더구조도 아니고 그렇다고 저희가 지금 쓰는 폴더구조도 아닌 끔찍한 혼종이 될 것 같기도 합니다.. 🤮

그렇다고 Input이 Common에 있는게 마음이 편하지는 않네요 ,,,
개인적으로 저는 쪼갠 애들은 Atom에, 그걸 통해 합쳤는데 여기저기에서 쓰는 아이라면 Common에, 특정 페이지에서만 사용한다면 그 페이지 폴더에 넣어두는게 좋다고 생각합니다. 여러분들 의견이 궁금합니다.

그래서 논의하고 싶은 건

1. Atom으로 쪼갠 애들을 합칠 때 명명 규칙을 정했으면 좋겠다

2. Atom 애들만을 위한 폴더를 만들었으면 좋겠다

• 폴더명도 같이 정했으면 좋겠다
• 이럴 때 통용적으로 쓰이는 폴더구조와는 차이가 나는데 그래도 상관없으시련지..

[Hyevvy]

혹시 이해가 안 되시는 부분은 편하게 comment 해주세용 〰️〰️

[YuHyun-P]

그런데 이렇게 쪼갠 컴포넌트들이 이라는 폴더보다는 같은 폴더에 더 어울린다는 생각이 들었습니다. 이렇게 되면 쓸 때는 어디서 찾을 지 편하지만 Atom 폴더구조도 아니고 그렇다고 저희가 지금 쓰는 폴더구조도 아닌 끔찍한 혼종이 될 것 같기도 합니다.. 🤮
그렇다고 Input이 Common에 있는게 마음이 편하지는 않네요 ,,,

혜경님 의견인 아토믹하게 쪼개는 것과 쪼개진 컴포넌트 조합 중 자주 사용되는 것은 또 다른 하나의 컴포넌트로 만드는 것은 좋은 것 같습니다!! 하지만 저는 폴더 구조가 혼종이 되는 것이 더 마음이 편하지 않네요🥹

[hwoo3303]

그럼 이 세 가지를 담은 새로운 Input 컴포넌트가 필요합니다. 쪼갠 컴포넌트를 합쳤을 때 이름이 문제입니다.
이렇게 atomic하게 쪼갠 컴포넌트를 합쳤을 때 이름을 무엇으로 할 지 정했으면 좋겠습니다

InputBox, InputContainer 혹은 담당하신 페이지에서만 사용되는 합성 컴포넌트라면 각 영역에 맞게 네이밍을 해주시면 될거같아요 🙂

개인적으로 저는 쪼갠 애들은 Atom에, 그걸 통해 합쳤는데 여기저기에서 쓰는 아이라면 Common에, 특정 페이지에서만 사용한다면 그 페이지 폴더에 넣어두는게 좋다고 생각합니다. 여러분들 의견이 궁금합니다.

Atom과 Common에 들어갈 컴포넌트의 기준이 애매해지는거같아요.

• Button
• Select
• Textarea

이 컴포넌트들은 쪼갤 수 없는 단위이고 기존에는 Common에 위치해있는 컴포넌트들인데 해경님 의견이라면 Atom으로 들어가야되는지 궁금합니다. 👀