적용 코드
<UserInfoInput
labelText='사용자 이름'
placeholder='2~10자 이내여야 합니다.'
maxLength='10'
></UserInfoInput>
JavaScript
복사
속성 | 설명 |
text | 입력항목 |
type | input type
ex) email, password, text 등 |
onChange | 입력값이 변경될때 실행될 함수 |
onBlur | 포커스가 해제될 때 실행될 함수 |
컴포넌트 구현 코드
function InputDiv({ type, text, onChange, onBlur }, ref) {
return (
<InputBox text={text}>
<InputTag ref={ref} onChange={onChange} onBlur={onBlur} type={type} required />
<span>{text}</span>
</InputBox>
);
}
export default forwardRef(InputDiv);
JavaScript
복사
•
컴포넌트 사용시 입력값을 useRef로 처리하기 위하여 forwardRef 사용
