공통 컴포넌트 제작 방식? 질문

Question

안녕하세용.백엔드 위주로 하는 사람인데, 리액트로 사내 공통 컴포넌트를 만들어내야 하는 상황이 생겼습니다.이런 건 처음인데, 아래처럼 만들면 충분한가요?어떤 방식으로 하는 지 몰라가지고 도움을 청해봅니다.지피티가 다양한 코드를 제공해주긴 하는데, 보는 눈이 없어서 뭘 써야 할 지 전혀 감을 못잡겠네요.단순 코드 형식이지만 염치불구하고 질문드립니다.아래는 공통 버튼 만든 예시입니다.대충 가로, 세로, 색상을 기본값을 주되, 인자로 받은 값을 세팅해줍니다.interface ButtonProps {. width?: string. height?: string. color?: string. className?: string. style?: React.CSSProperties}export const Button = ({. children,. width = '100px',. height = '40px',. color = '#007bff',. className = '',. style = {},. ...rest}: ButtonProps) => {. return (. . {children}. . )}

RWB · Answer

interface ButtonProps { readonly width?: string; readonly height?: string; readonly color?: string; readonly className?: string; readonly style?: React.CSSProperties; } export function Button({ children, width = '100px', height = '40px', color = '#007bff', className = '', style = {}, ...rest }: ButtonProps) { return ( ); }일단 올려주신 코드 정리해보면 위와 같습니다.공통 컴포넌트 구현할 때 가장 중요한 건, 기본적인 button 코드를 확장 가능한 형태로 구성할 수 있어야한다는 겁니다.이는 간단한 input , div 컴포넌트를 만들 때도 마찬가지입니다.그래야 나중에 이 버튼을 갖고 또 다른 확장을 하거나, 다른 컴포넌트와 엮을 때 훨씬 더 유용합니다.지금의 구조는 버튼의 가장 기본이 되는 onClick 메서드조차 연결이 안 되어 있는데다, 특정 이벤트 같은 추가 프로퍼티가 필요할 때마다 일일히 들어가서 수정해줘야하는 형태입니다.일단 정의하신 ButtonProps 에 5가지 프로퍼티 외에 쓸 수 있는게 없는 형태입니다. 그럼에도 불구하고 정의되지 않은 className , children , 나머지 기타 rest 프로퍼티를 사용하고 계신데, 이는 구조적으로 맞지 않습니다. 오류가 날거에요.interface ButtonProps extends DetailedHTMLProps, HTMLButtonElement> { readonly width?: string; readonly height?: string; readonly color?: string; } export function Button({ width = '100px', height = '40px', color = '#007bff', className = '', style, children, ...rest }: ButtonProps) { return ( ); }따라서 위 형태처럼 구성하는 것이 더 낫습니다.DetailedHTMLProps, HTMLButtonElement> 를 확장한 것에 주목해주세요.위 타입은 React에서 기본적으로 정의된 button 의 타입입니다. 해당 타입 안에 className , children , onClick 등. button 태그에 들어가는 모든 타입이 정의되어 있습니다.이 타입을 확장하여 width 등의 커스텀 프로퍼티를 추가하는 방식이 되는 형태죠.이렇게 구성해주면 버튼에 사용되는 모든 프로퍼티를 활용할 수 있으면서도, 내가 원하는 형태의 커스터마이징이 가능합니다.물론 이와 같은 확장 구조는 지금과 같이 단일 button 을 확장하기 때문에 가능한 것으로, 추후 만드시게 될 컴포넌트들 중, 여러 태그가 겹치는 복잡한 컴포넌트를 만들 경우엔 해당사항이 없습니다.

장독깨기 · Answer

이런 건 잘 만들어진 것을 참조해서 분석해보는 것도 큰 도움이 될 것 입니다.가령,https://mui.com/material-ui/api/button/https://github.com/mui/material-ui/blob/v7.2.0/packages/mui-material/src/Button/Button.jshttps://github.com/mui/material-ui/blob/v7.2.0/packages/mui-material/src/ButtonBase/ButtonBase.js

몰랑토끼 · Answer

버튼 하나만 해도 '컴포넌트의 정의' 와 일맥상통하여 할말이 정말 많은데 아래 컴포넌트를 보고 연구해보세요. (solid도 포함하여)import classNames from "classnames"; import React, { forwardRef, Ref } from "react"; import { twMerge } from "tailwind-merge"; type buttonType = { [key: string]: string; }; const buttonSize: buttonType = { small: "text-xs", medium: "text-base", large: "text-lg", }; const buttonTheme: buttonType = { primary: "bg-primary text-white", secondary: "hover:bg-gray-400 text-black", border: "border border-transparent hover:saturate-10", }; type ButtonProps = { children: React.ReactNode; size?: "small" | "medium" | "large"; theme?: "primary" | "secondary" | "border"; onClick?: React.MouseEventHandler; className?: string; full?: boolean; }; const Button = forwardRef(({ children, size = "medium", theme = "primary", className, full, onClick, ...attr }: ButtonProps, ref: Ref) => { return ( ); }); Button.displayName = "Button"; export default Button;

yeori · Answer

버튼이라는 게 기본 너비를 주면 안되는 상황이 많을 겁니다.어디까지나 공통이니까 회사마다 쓰임새가 제각각이지만 대부분의 버튼은 너비를 지정하지 않고 내부 content 에 따라서 너비가 조절되는 형태입니다.오히려 버튼 텍스트의 크기를 조금씩 바꿔야 하는 경우가 많습니다. 아주 작은 버튼(xs), 작은 버튼(sn), 기준 크기(md), 약간 큰 버튼(lg), 그리고 직접 지정...아이콘을 옵션으로 받는 경우도 있을테고, 공통 아이콘 컴포넌트가 필요할 수도 있습니다.버튼 바탕색, 글자색, border 색 등을 요구하는지도 알아봐야 합니다.더 나아가서 [전송] 버튼 눌렀을 때 disable 시키고 로딩 애니메이션을 넣어달라고 한다거나, 말이 좋아서 공통이지 요구 사항 받아서 구현하면 위와같이 간단하지가 않습니다.저거보다 더 복잡할 겁니다.

공통 컴포넌트 제작 방식? 질문

4개의 답변

기술 목록