공통 컴포넌트 작성 방식

[03hoho03]

참고블로그
공통 컴포넌트 작성 방식에 대해 얘기를 나눠보고 싶습니다. 이러한 방식을 적용하게 되면 현재 기능적으로 큰 차이는 없지만 design 을 위해 3개로 나눠져있는 button 들을 예시로들면 한 개의 컴포넌트로 줄일 수 있는 효과를 기대할 수 있을꺼 같은데요, 여러분들의 생각은 어떤지 자유롭게 의견 하나씩들 남겨주시면 감사하겠습니다 !!

그리고 styled css, interface or type, 그리고 컴포넌트 사이에서 작성 순서를 정하고 가시면 앞으로 더욱 깔끔하게 컨벤션이 지켜질꺼라 예상이되는데요, 어떤 순서가 좋을지 요것도 의견 하나씩들 남겨주시면 감사하겠습니다.
@hanseulhee @chaduhwan

[hanseulhee]

구조가 동일하면 스타일은 theme을 정해서 관리하자는 말씀이시죠 ?? 파일이 여러 개로 관리안되서 관리하기에는 편할 것 같아요.

근데 해당 컴포넌트에 어떠한 함수들이 적용될 경우에는 오히려 코드가 더 복잡해질 수 있을 것 같아요 (ex 추가버튼은 다른 버튼과 다르게 특정 컴포넌트가 복사되는 추가 로직을 짜야함, 결국 파일을 또 만들거나 페이지에서 이를 관리해야 하는데 그럼 관심사 분리가 제대로 되지 않을 수도 있을 것 같다는 생각이 들어요) 이런 경우는 어떻게 생각하시나요 ?? 혹은 아토믹패턴을 도입해 폴더구조를 변경한다면 혼란을 줄일 수 있을 것 같아요!

저는 type, interface, 컴포넌트 (함수), styled css 순으로 작성해 왔는데 갠적으로 이 순서가 읽기 편해서 그렇게 했었습니다. 바꾼다면 바꿀 수 있어용
(+ discussions 올릴 때나 댓글 남길 때도 디코 알람이 오도록 설정해놨습니다)

[03hoho03]

복사되는 추가 로직을 짜더라도
공통 컴포넌트 Button 컴포넌트가 htmlbuttonprops 를 다 받고 단일 태그로 이루어져 있어서 ...rest or ...props 로 onChange 나 type 같은거를 기본적으로 부모로부터 받을 수 있는걸로 알고있습니다. 일단 제가 생각하고있는 common 폴더에 들어갈 공통 컴포넌트들은 최소한의 기능만 가진 공통적인 컴포넌트로 보았습니다.
** 지금 다시보았는데 onClick 같은것을 따로 받을 필요가없습니다 !
button 의 props 의 타입이 ButtonHTMLAttributes 를 상속받는 타입이면 onClick 등 태그에서 원래 받던 속성들을 따로 설정하지 않아도 그대로 넘길수있어요 !

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof ButtonVariants> {
  asChild?: boolean
  children?: React.ReactNode
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, weight, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'

    return (
      <Comp
        className={cn(ButtonVariants({ variant, size, weight }), className)}
        ref={ref}
        {...props}
      />
    )
  },
)
Button.displayName = 'Button'

export default Button

전에 했던 코드의 일부분 입니다. ...props 로 onClick 등을 기존

태그를 사용하는 것처럼 그대로 넘겨줄 수 있었습니다 !!!

[hanseulhee]

아 그렇네요 !!!! 제가 이를 제대로 응용할 생각을 못했네요. 말씀해주신대로 공통 컴포넌트는 ui만 하고 그 위에서 관리하면 될 것 같아요 해당 버튼 부분은 다시 수정해볼게요!

[chaduhwan]

디자인에 통일성이 있고 재사용이 가능한 스타일이라면 말씀하신 위 방식대로 하는 게 효율적이라고 생각합니다.!

제가 아직 개발을 안들어가서 스리님이랑 피기님은 공통 컴포넌트에 이벤트나 함수들을 적용할 것을 예상해 공통 컴포넌트 안에 로직을 구성하시나요??
저는 간단한 상테 (boolean타입으로 관리 되는 상태 등)들은 공통 컴포넌트안에서 해결할려고 했습니다 !

작성 순서는 기존에 styled css, type, interface, 컴포넌트 순으로 작성했는데 다른분들은 어떤식으로 하실까요 ??

[03hoho03]

타입을 적절하게 넣으면 그 타입에 대한 html tag element 에 있는 event 나 함수들을 그대로 넘길 수 있습니다!! 그래서 공통 컴포넌트안에는 그 컴포넌트가 기능하기위한 최소한의 기능만 있는걸로 생각했습니다. (기능이란 ui적으로 기능하는 기능입니다. ex) Dialog 가 동작하기 위한 최소한의 기능) 다른 fetch를 한다거나하는 로직들은 이제 해당 도메인에서 공통 컴포넌트를 적절히 가져와 그 위에서 일어나는 행동이라 생각했습니당

[hanseulhee]

그러면 최종적으로 구조가 동일하면 스타일은 theme을 정해서 관리하고 styled css, type, interface, 컴포넌트 순으로 진행할까요 ?? 이전에 이미 머지됐던 부분은 맡았던 분이 수정하면 될 것 같아용

[03hoho03]

넵 근데 styled 안에 선언한 변수를 넣으려면 lint 규칙때매 앞에서 더 앞에 선언해야 되더라구요... 그래서 변수 styled 타입들 컴포넌트 순서로 일단 작성했습니다.