🟡

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

기술

React

상태

In progress

작업

라벨&인풋

어떤 인풋은 minlength가 필요하고 어떤 인풋은 또 required가 필요하고 어떤 인풋은 min이 필요하고 이벤트 등등이 제각기 다 다를텐데 내가 짠 코드는 그런 경우를 다 대비해서 함수의 파라미터를 대비해야 하는 느낌이다.

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
복사

이거에 관련된 이슈로, 저는 현재 제가 맡고 있는 페이지의 인풋 이벤트(포커스 되었을 때, 포커스 아웃일 때)만 고려해서 코드를 짰습니다.

그런데 로그인의 경우 경고 메세지가 뜨는 경우는 인풋창에서 포커스 아웃일 때가 아니라 제출 버튼을 누른 경우 입니다.

그래서 포커스 되었을 때의 경우 함수를 전달하지 않음으로써 포커스 아웃시 이벤트가 일어나지 않도록 코드를 짰는데, 로그인시에도 이 컴포넌트를 재활용할 수 있으려면 코드를 나중에 수정해야 할 수도 있다는 생각이 듭니다.