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

[React Native] 입력 창 연속해서 이동하며 focus 하기(1), 컴포넌트로 ref 넘겨주는 문제! (tistory.com)

[React Native] 입력 창 연속해서 이동하며 focus 하기(1), 컴포넌트로 ref 넘겨주는 문제!

위에서 useRef()를 사용해서 연속해서 입력할 수 있는 기능을 구현했다.

 

그러나 회원가입에 해당 기능을 넣기 위해서는 6개나 되는 useRef를 선언해야 한다.

중복된 코드가 너무 많아지므로 useRef를 배열로 선언해 보자!

const inputRef = useRef();
const inputRef2 = useRef([]);

위와 같이 inputRef는 그냥 useRef()로 선언했고, inputRef2는 useRef()배열로 선언했다.

이렇게 해서 콘솔에 출력해본 결과 아래와 같다.

아직 useRef가 가지는 element가 존재하지 않기 때문에 inputRef는 current가 null이고, 

inputRef는 current를 null 배열로 가지고 있는 것을 볼 수 있다.

따라서 우리는 이 배열에 여러 개의 element reference들을 넣을 수 있다.

 

ref prop는 매개변수로 element를 제공한다. 따라서 아래와 같이 해당 element를 ref의 current에 넣어줄 수 있다.

우리는 current 배열에 넣어야 하므로 current[0]에 넣으면 된다.

// 같은 코드
ref={inputRef}
ref={element => (inputRef.current = element)}

// current 배열에 넣기
ref={element => (inputRef2.current[0] = element)}
ref={element => (inputRef2.current[1] = element)}

 

그리고 해당 element에 focus를 줄 때도 아래와 같이 배열에 담긴 요소에 접근해서 focus를 주면 된다.

 inputRef.current[0].focus();

 

아래는 전체 코드이다!

const inputRef = useRef([]);

...

return(
<>
...
     <AppInputs.BorderBottomInput
        maxLength={15}
        placeholder="이름"
        value={userName}
        onChangeText={setUserName}
        margin={{marginBottom: 10}}
        onSubmitEditing={e => {
           inputRef.current[0].focus();
        }}
        blurOnSubmit={false}
      />
      <AppInputs.BorderBottomInput
        maxLength={30}
        placeholder="이메일"
        value={userEmail}
        onChangeText={setUserEmail}
        autoCapitalize="none"
        margin={{marginBottom: 10}}
        ref={element => (inputRef.current[0] = element)}
        onSubmitEditing={e => {
           inputRef.current[1].focus();
        }}
        blurOnSubmit={false}
      />
      <AppInputs.BorderBottomInput
        maxLength={16}
        placeholder="비밀번호 (영문과 숫자 조합 8~16)"
        value={userPassword}
        onChangeText={setUserPassWord}
        secureTextEntry={true}
        autoCapitalize="none"
        margin={{marginBottom: 10}}
        ref={element => (inputRef.current[1] = element)}
      />
      ...
</>
)

 

#참고

Storing an array of elements using the useRef hook | by Matt Claffey | Medium

Adding React Refs to an array of items