markup24

디자인에 따라 기본 Input 셋트를 미리 만들어 놓으면 이후 각 화면 별로 적용하기가 용이하다.부모 컴포넌트에서 사용) 원 Input Components Full Sourceimport React, { forwardRef } from "react";import styles from "./Input.module.scss";import classNames from "classnames";interface InputProps { type?: "text" | "password" | "email" | "number" | "url" | "tel" | "search"; name?: string; value?: string; placeholder?: string; disabled?: boolean; ..

앞서 Button과 같이 input 컴퍼넌트의 기본 셋팅이다.import React, { forwardRef } from "react";import styles from "./Input.module.scss";import classNames from "classnames";interface InputProps { type?: "text" | "password" | "email" | "number" | "url" | "tel" | "search"; styleVariant?: string; disabled?: boolean; customClassName?: string;}const Input = forwardRef( ( { type = "text", styleVariant =..

실제 컴포넌트 제작 시 부모 컨포넌트를 고려해 적용한 버전이다.import React, { forwardRef } from "react";import styles from "./Button.module.scss";import classNames from "classnames";interface ButtonProps { type?: "button" | "submit" | "reset"; styleVariant?: string; disabled?: boolean; customClassName?: string; children?: React.ReactNode;}const Button = forwardRef( ( { type = "button", styleVariant = ""..

React와 TypeScript가 결합된 .tsx 파일은 효율적인 유지보수를 위해 크게 세 가지 논리적 영역으로 구분하여 작성한다. 가장 대중적인 '버튼 컴포넌트'를 예로 들어 그 구조를 살펴보겠다. 1. 외부 자원 임포트 (Import Section) 컴포넌트 구현에 필요한 라이브러리와 스타일 파일을 불러오는 영역. 2. 타입 정의 (Interface Section) TypeScript의 핵심인 Props(속성) 인터페이스를 정의하는 영역 3. 컴포넌트 로직 및 마크업 (Implementation Section) 실제 UI를 렌더링하고 비즈니스 로직을 처리하는 영역. 정의된 인터페이스를 바탕으로 Props를 구조 분해 할당하여 사용.import React from "react";import sty..

과거에도 공통 HTML을 미리 정의해두고 페이지마다 반복해서 사용하곤 했다. 하지만 React UI 마크업의 핵심은 코드를 복사하는 것이 아니라, 필요한 곳에 컴포넌트를 '불러와(import)' 사용하는 것이다.단순한 '반복'에서 '조립'으로 패러다임이 바뀌게 된것이다.이때에 주의해야할 점은 아래와 같다.1. 하나의 컴포넌트 수정으로 전체 페이지에 업데이트를 할 수 있어야한다. 2. 기능 추가시 props 확장으로 대응할 수 있어야한다. 3. 새로운 페이지 개발시 기존 컴포넌트 조합만으로 구성 되어야한다.4. 스타일은 컴포넌트 내부에 캡슐화하거나 공통 스타일 시스템을 활용한다. 디자인 적인 요소보다는 기능적인 form요소를 주로 제작한다. 가능하다면, 분리가 가능한 것들은 세분화하기도 한다.예시) ..