search

jin0106 / ContiNew

이어살기 및 쉐어하우스를 위한 부동산 중개 플랫폼 서비스입니다.
0 stars 0 forks source link

[REFACTOR] createSale 컴포넌트 로직과 뷰 분리 #17

Closed jin0106 closed 1 year ago

jin0106 commented 1 year ago

관련 이슈

15

작업 내용

createSale 컴포넌트들의 폴더를 container 폴더로 이동 시켰습니다. 또한 로직과 뷰 분리를 위해 container 폴더안에 components와 hooks 폴더를 생성하였고, Location.tsx와 Photos.tsx의 로직을 useLocation.ts, usePhoto.ts 커스텀 훅으로 구현하여 뷰와 분리를 하였습니다. createSale 같은경우 각각의 section들이 많이 나누어져 있어 관리를 위해 section 폴더를 만들고 그 안에 각각의 section view 파일들을 위치 시켰는데, 이 부분에 대한 의견을 듣고싶습니다.

imgoing222 commented 1 year ago

음.. 지금 방법도 기준이 있고 설명을 하면 이해를 못할정도는 아닌 거 같은데 section을 저렇게 폴더명으로 사용한 경우를 못봤어서 약간 망설여지네요...

다른 의견을 내본다면 components 폴더안에 공통으로 쓰이는 component들 추가하고 components 하위 폴더로 Description, LocationInfo, OptionInfo ... 이렇게 만들어서 각 폴더에 또 해당 section에서만 쓰이는 컴포넌트 추가하는 것도 괜찮을 거 같아요!

import 할 때 복잡해지려나요...?

jin0106 commented 1 year ago

음.. 지금 방법도 기준이 있고 설명을 하면 이해를 못할정도는 아닌 거 같은데 section을 저렇게 폴더명으로 사용한 경우를 못봤어서 약간 망설여지네요...

다른 의견을 내본다면 components 폴더안에 공통으로 쓰이는 component들 추가하고 components 하위 폴더로 Description, LocationInfo, OptionInfo ... 이렇게 만들어서 각 폴더에 또 해당 section에서만 쓰이는 컴포넌트 추가하는 것도 괜찮을 거 같아요!

import 할 때 복잡해지려나요...?

  • components

    • label.tsx

    • input.tsx

    • description

    • Description.tsx

    • Description에서만 쓰이는 component.tsx

    • locationInfo

    • LocationInfo.tsx

    • LocationInfo에서만 쓰이는 component.tsx ...

그렇게도 생각을 해보았는데, 너무 많은 폴더 뎁스가 생기는것 같아 오히려 불편할거 같다는 생각이 들더라구요. 리액트 공홈에서도 정해진 폴더 구조는 없지만 3-4번을 최대한으로 하고 너무 많은 중첩은 지양하라는 내용이 있어서 section 하나로 만들었습니다. 사실 html 시맨틱 태그 입장에서 봤을 때 각각의 컴포넌트들이 section의 역할을 하는거 같기도 해서 section 폴더라고 일단 네이밍을 해보았습니다. 그리고 해당 section에서만 사용하는 컴포넌트보단 여러 section에서 다중으로 사용되는게 많아서 각각의 폴더를 만드는거는 조금 어렵다고 생각을 했었어요!

reference: https://ko.reactjs.org/docs/faq-structure.html

imgoing222 commented 1 year ago

그렇게도 생각을 해보았는데, 너무 많은 폴더 뎁스가 생기는것 같아 오히려 불편할거 같다는 생각이 들더라구요. 리액트 공홈에서도 정해진 폴더 구조는 없지만 3-4번을 최대한으로 하고 너무 많은 중첩은 지양하라는 내용이 있어서 section 하나로 만들었습니다. 사실 html 시맨틱 태그 입장에서 봤을 때 각각의 컴포넌트들이 section의 역할을 하는거 같기도 해서 section 폴더라고 일단 네이밍을 해보았습니다. 그리고 해당 section에서만 사용하는 컴포넌트보단 여러 section에서 다중으로 사용되는게 많아서 각각의 폴더를 만드는거는 조금 어렵다고 생각을 했었어요!

reference: https://ko.reactjs.org/docs/faq-structure.html

확실히 depth가 많아질 거 같긴해요! 저도 고민해봤는데 찰떡같은 이름을 못 찾겠네요.... 계속 고민해보는걸로 하고 우선은 그럼 section으로 정할까요? 😀