🧩
라벨&인풋

InfoInput.jsx

import React from 'react'

export default function InputAndWarn({
    type, 
    placeHolder, 
    pattern, 
    label,
    required, 
    minlength, 
    maxlength,
    onBlur
}) {
    if (required) {
        return (
            <label>
                <span>{label}</span>
								{/* onFocus의 경우 어떤 곳에서든 기본적으로 작동하는 것일 때 */}
                <input
                    type={type}
                    placeholder={placeHolder}
                    pattern={pattern}
                    minLength={minlength}
                    maxLength={maxlength}
                    onBlur={onBlur}
                    onFocus={(e) => {e.target.style.backgroundColor="red"}}
                    required
                />
            </label>
        )
    } else {
        return (
            <label>
                <span>{label}</span>
								{/* onFocus의 경우 어떤 곳에서든 기본적으로 작동하는 것일 때 */}
                <input
                    type={type}
                    placeholder={placeHolder}
                    pattern={pattern}
                    minLength={minlength}
                    maxLength={maxlength}
                    onBlur={onBlur}
                    onFocus={(e) => {e.target.style.backgroundColor="red"}}
                />
            </label>
        )       
    }
}
JavaScript
복사
이슈

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