[블로그 프로젝트] forwardRef를 사용해서 Input 컴포넌트 만들기

함수형 컴포넌트는 레퍼런스가 없기 때문에 ref를 사용할 수 없다.

때문에 함수형 컴포넌트에 ref를 통해 데이터를 전달하려면 forwardRef() 를 사용해야 한다.

 

const InputBox = forwardRef<HTMLInputElement, Props>((props: Props, ref) => {

	//         state:properties 			//
	const { label, type, value,  placeholder, error, icon, message} = props;
	const { onChange , onButtonClick, onKeyDown} = props;

	//  event handler: 키 이벤트 처리 함수 			//
	const onKeyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {
		if(!onKeyDown) return;
		onKeyDown(event);
	}

	//       render: Input Box 컴포넌트 			//
	return (
		<div className='inputbox'>
			<div className='inputbox-label'>{label}</div>
			<div className={error ? 'inputbox-container-error' : 'inputbox-container'}>
				<input  ref={ref} type = {type} className='input' placeholder={placeholder} value={value} onChange={onChange} onKeyDown={onKeyDownHandler}/>
				{onButtonClick !== undefined && (
				<div className='icon-button' onClick={onButtonClick}>
					{icon !== undefined && (
					<div className={`icon ${icon}`}></div>
					)}
				</div>
				)}
			</div>
			{message !== undefined && <div className='inputbox-message'>{message}</div>}
		</div>
	)
})

export default InputBox

 

위와 같이 forwardRef를 통해 인자로 props와 함께 ref를 받아서 처리할 수 있다.

props의 각 변수와 함수를 input 요소에 맵핑 시켜준다.

onKeyDownHandler를 통해 keyEvent 처리 함수도 만들어준다.

 

//				event handler: 이메일 인풋 키 다운 이벤트 처리				//
const onEmailKeyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {
	if (event.key !== 'Enter') return;
	if (!passwordRef.current) return;
	passwordRef.current.focus();
}

//				event handler: 패스워드 키 다운 이벤트 처리				//
const onPassworKeyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {
	if (event.key !== 'Enter') return;
	onSignInButtonClickHandler();
}



return (

..
..

</div>
	<InputBox ref={emailRef} label = '이메일주소' type = 'text' placeholder='이메일 주소를 입력해주세요.' error={error} value={email} onChange={onEmailChangeHandler} onKeyDown={onEmailKeyDownHandler}/>
	<InputBox ref={passwordRef} label = '패스워드' type = {passwordType} placeholder='비밀번호를 입력해주세요.' error={error} value={password} onChange={onPasswordChangeHandler} icon={passwordButtonIcon} onButtonClick={onPasswordButtonClickHandler} onKeyDown={onPassworKeyDownHandler}/>
</div>
)

 

로그인 카드 컴포넌트의 일부이다.

InputBox에 props와 함께 ref를 전달하고 이메일 입력에서 keyDown(Enter)이벤트 발생 시 비밀번호 입력창으로 포커스를 옮겨주고

비밀번호 입력후 다시 Enter를 누를 시 로그인 버튼 클릭 이벤트 함수를 호출해서 로그인 동작이 일어난다.