[react-native] 입력 창 연속해서 이동하며 focus 하기(1), 컴포넌트로 ref 넘기기, forwardRef

로그인이나 회원가입처럼 연속된 입력이 주어질 때, 자동으로 이동 되지 않는다면 사용자는 불편하게 느낄 수 있다.

별거 아닌 것 같아도 사용성 측면에서 좋지 않으므로 개발 중인 서비스에 적용했다.

 

다음으로 focusing 될 컴포넌트를 지정하기 위해 useRef()를 사용했다.

useRef는 js에서 element를 지정하는 getElementById()와 비슷한 기능으로 사용할 수 있다.

Hooks API Reference – React (reactjs.org)

Hooks API Reference – React

 

사용자가 키보드에서 입력을 눌렀을 경우에 이벤트가 발생해야 하므로 TextInput의 onSubmitEditing에서 함수가 동작하도록 했다.

또한 TextInput은 입력이 완료되면 자동으로 키보드가 밑으로 내려가도록 되어있다. 따라서 아무리 focus를 이동시켜도 키보드가 한번 내려갔다가 다시 올라오는 동작이 부가적으로 일어난다.

이를 방지하기 위해서 blurOnSubmit={false}로 처리했다.

 

아래는 코드이다.

const inputPW = useRef();

...

return(
    <>
        <AppButtons.BorderBottomInput
          maxLength={15}
          placeholder="아이디"
          value={userId}
          onChangeText={setUserId}
          margin={{marginBottom: 10}}
          onSubmitEditing={() => inputPW.current?.focus()}
          blurOnSubmit={false}
        />
        <AppButtons.BorderBottomInput
          maxLength={15}
          placeholder="비밀번호"
          value={userPassword}
          onChangeText={setUserPassword}
          Ref={inputPW}
          secureTextEntry={true}
          margin={{marginBottom: 10}}
        />
    </>
}

 

그런데 여기서 문제!

원래는 이렇게 하면 잘 작동해야 하는데 자동으로 포커스가 넘어가지지 않았다.

실수한게 있나 싶어서 콘솔로 디버깅해봤더니..!

역시나 BorderBottomInput 컴포넌트로 넘겨준 ref가 제대로 넘어오지 않아서 일어난 일이었다.

 

위의 코드에서 보이듯이 나는 TextInput을 바로 사용하지 않고, 커스텀한 BorderBottomInput 컴포넌트를 사용했다. 

그러나 분명히 ref={ref}로 넘겼음에도 BorderBottomInput에서는 undefined로 나왔다.

 

검색해본 결과 react에서 ref는 prop이 아니므로 key와 같이 props로 전달이 불가능하다!

Special Props Warning – React (reactjs.org)

Special Props Warning – React

 

따라서 ref를 전달하기 위해서는 React에서 제공하는 forwardRef를 사용해야 한다.

더 자세한 내용은 아래를 참고하면 된다.

Ref 전달하기 – React (reactjs.org)

Ref 전달하기 – React

 

아래는 내가 커스텀 한 BorderBottomInput 컴포넌트를 css를 제외하고 간략하게 요약한 코드이다.

원래의 함수를 forwardRef로 감싸고, ref를 두번째인자로 받았다. 

이렇게 했더니 드디어 자동으로 focus를 넘기는데 성공했다!

import React, {forwardRef} from 'react';

...

export const BorderBottomInput = forwardRef(
  (
    {
      value,
      onChangeText,
      placeholder,
      maxLength,
      secureTextEntry,
      autoFocus,
      onSubmitEditing,
      blurOnSubmit,
      disable = false,
    },
    ref,
  ) => {
    return (
        <TextInput
          value={value}
          onChangeText={onChangeText}
          placeholder={placeholder}
          maxLength={maxLength}
          secureTextEntry={secureTextEntry}
          autoFocus={autoFocus}
          onSubmitEditing={onSubmitEditing}
          blurOnSubmit={blurOnSubmit}
          disable={disable}
          ref={ref}
        />
    );
  },
);

 

그런데 이번에는 해당 기능을 회원가입에 적용하려 하는데

input이 7개나 되는 회원가입에서는 useRef를 6번 선언해야 하는걸까?

너무 비효율적인 중복 코드가 나올 것 같아 useRef를 배열로 관리하는 법을 찾아서 적용했다!

[React Native] 입력 창 연속해서 이동하며 focus 하기(2) - useRef 여러개를 배열로 관리하기 (tistory.com)

[React Native] 입력 창 연속해서 이동하며 focus 하기(2) - useRef 여러개를 배열로 관리하기