🟡

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

기술

React

JavaScript

상태

In progress

작업

정보_입력_템플릿

문제점

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) {
            console.log("유효하지 않습니다.");
            setVisibility(true);
        } else {
            console.log("유효합니다.");
            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
복사

사용자 이름: 처음에 패턴에 맞게 제대로 입력(setVisibility(false) 실행) ⇒ 다시 패턴에 맞게 제대로 입력(다시 setVisibility 실행)

패턴에 맞는 상태일 경우(visible = false): 사용자가 다시 입력한 것이 패턴에 또 다시 맞다면 setVisiblity(false)를 실행할 필요가 없음

패턴에 맞지 않은 상태일 경우(visible = true): 사용자가 다시 입력한 것이 패턴에 또 다시 맞지 않다면 setVisibility(true)를 실행할 필요가 없음

이 코드는 쓸데없이 리렌더링이 일어나는건 아닐까?

나의 해결 방법

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) {
            if (visible === true) {
                return;
            } else {
                setVisibility(true);
                console.log("유효하지 않아서 리렌더링 함");
            }
        } else {
            if (visible === false) {
                return;
            } else {
                setVisibility(false);
                console.log("유효해서 리렌더링 함");
            }
        }
    };

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