⛑️

반복되는 거를 컴포넌트로 만들기

•

InfoInput + Warning을 상황별로(Blur시 이벤트가 일어나는 거 등등이라던지) 템플릿화? 

BlurInpWarn.jsx

•

인풋에서 블러시 패턴 미스매치가 되면 경고 메세지가 뜨는 게 반복됨(사용자 이름, 계정 ID)

import React, { useState } from "react";
import InfoInput from "../shared/InfoInput/InfoInput";
import Warning from "../shared/Warning/Warning";

export default function BlurInpWarn({
    type,
    placeHolder,
    pattern,
    label,
    required,
    minlength,
    maxlength,
    message,
}) {
    const [visible, setVisibility] = useState(false);

    const handleOnBlur = (e) => {
        e.target.style.backgroundColor = "initial";
        if (e.target.validity.patternMismatch) {
            setVisibility(true);
        } else {
            setVisibility(false);
        }
    };

    return (
        <>
            <InfoInput
                type={type}
                placeHolder={placeHolder}
                pattern={pattern}
                label={label}
                required={required}
                minlength={minlength}
                maxlength={maxlength}
                onBlur={handleOnBlur}
            />
            <Warning message={message} visible={visible} />
        </>
    );
}
JavaScript
복사

ProfileSetInpsTemp.jsx

import React from "react";
import ProfileImageSet from "../shared/ProfileImageSet/ProfileImageSet";
import InfoInput from "../shared/InfoInput/InfoInput";
import BlurInpWarn from "../BlurInpWarn/BlurInpWarn";
import "./profileSetInpsTemp.css";

export default function ProfileSetInpsTemp({ formId }) {
    return (
        <form id={formId}>
            <ProfileImageSet />
            <BlurInpWarn
                type={"text"}
                label={"사용자 이름"}
                placeHolder={"2~10자 이내여야 합니다."}
                minlength={"2"}
                maxlength={"10"}
                pattern={"[a-zA-Zㄱ-힣 ]{2,10}"}
                required={true}
                message={"경고"}
            />
            <BlurInpWarn
                type={"text"}
                label={"계정 ID"}
                placeHolder={"영문, 숫자, 특수문자(.),(_)만 사용 가능합니다."}
                pattern={"[a-zA-Z0-9._]+"}
                required={true}
                message={"영문, 숫자, 밑줄 및 마침표만 사용할 수 있습니다."}
            />
            <InfoInput
                type={"text"}
                label={"소개"}
                placeHolder={"자신과 판매할 상품에 대해 소개해 주세요!"}
                onBlur={(e) => (e.target.style.backgroundColor = "initial")}
            />
        </form>
    );
}
JavaScript
복사

이렇게 하니 작동 됩니다!

경고 메세지 리렌더링에 관하여