함수형 컴포넌트는 레퍼런스가 없기 때문에 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를 누를 시 로그인 버튼 클릭 이벤트 함수를 호출해서 로그인 동작이 일어난다.
'React' 카테고리의 다른 글
Zustand 상태 관리 라이브러리 (0) | 2024.01.29 |
---|---|
React Router, Outlet (0) | 2024.01.29 |
리액트 Ref, state와의 차이 (0) | 2024.01.27 |
[블로그 프로젝트] DTO 정의 (0) | 2024.01.14 |
[블로그 프로젝트] 리액트(타입스크립트) 프로젝트 생성, index.html, App.tsx, index.tsx (0) | 2024.01.12 |