🧩

라벨&인풋

InfoInput.jsx

import React from "react";

export default function InputAndWarn({
    type,
    placeHolder,
    pattern,
    label,
    required,
    minlength,
    maxlength,
    onBlur,
}) {
    let inpEl = (
        <input
            type={type}
            placeholder={placeHolder}
            pattern={pattern}
            minLength={minlength}
            maxLength={maxlength}
            onBlur={onBlur}
            onFocus={(e) => {
                e.target.style.backgroundColor = "red";
            }}
        />
    );

    if (required) {
        inpEl = (
            <input
                type={type}
                placeholder={placeHolder}
                pattern={pattern}
                minLength={minlength}
                maxLength={maxlength}
                onBlur={onBlur}
                onFocus={(e) => {
                    e.target.style.backgroundColor = "red";
                }}
                required
            />
        );
    }

    return (
        <label>
            <span>{label}</span>
            {inpEl}
        </label>
    );
}
JavaScript
복사

이슈

InfoInput에 전달되는 어트리뷰트들 경우의 수를 많이 고려해야 함

required 여부 처리