[React Native/RN] Hooks - useRef 사용법, TextInput onSubmitEditing 사용 예제

 

 

이전글

👉🏻 [React Native/RN] Hooks이란? (useState, useEffect 사용법)

[React Native/RN] Hooks이란? (useState, useEffect 사용법)

 

 

 

useRef

 

• Ref란?

재랜더링을 하지 않고 DOM을 선택해 직접 접근하기 위해 사용하는 것이다.

 

• useRef

useRef는 .current 속성에 변경 가능한 값을 보유하는 '상자'와 같은 개념이다. 컴포넌트의 ref로 지정하면 변수 자체에 저장되는 게 아닌 refObject.curren에 값을 저장하게 된다.

useRef의 값이 변경되어도 컴포넌트는 재랜더링이 되지 않는다.

 

• 예제 - 키보드 다음 버튼 클릭 시 다음 TextInput으로 포커스 옮기기

import React, {useState, useRef} from 'react';

useRef를 사용하기 위해 import 해준다.

 

const [email, setEmail] = useState('')
const [password, setPassword] = useState('')

const refEmail = useRef()
const refPassword = useRef()

TextInput의 value로 사용될 state 변수 email, password를 useState를 사용해 생성한다.

각 TextInput의 ref를 저장할 useRef를 생성한다.

 

<TextInput
  ref={refEmail}
  value={email}
  onChangeText={(text) => {
    setEmail(text)
  }}
  onSubmitEditing={() => {
    refPassword.current.focus()
  }}
  returnKeyType={'next'}
  keyboardType={'email-address'}
/>

생성한 변수를 ref와 value에 각각 입력해준다.

 

returnKeyType: 키보드 UI의 완료, 다음 등의 버튼을 설정.

onSubmitEditing: 키보드의 완료(다음 등등) 버튼을 눌렀을 경우 실행되는 이벤트 함수.

refPassword.current.focus(): refPassword.current의 값에 포커스를 옮긴다.

 

 

 

 

 

• 코드 전문

import React, {useState, useRef} from 'react';
import {
    StyleSheet, View, TextInput
} from 'react-native';

function Example() {

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const refEmail = useRef()
  const refPassword = useRef()


  return (
    <View style={styles.welcomeContainer}>

      <TextInput
        style={styles.input}
        ref={refEmail}
        underlineColorAndroid="transparent"
        placeholder={'EMAIL'}
        placeholderTextColor={'#CDCED9'}
        autoCapitalize="none"
        value={email}
        onChangeText={(text) => {
          setEmail(text)
        }}
        onSubmitEditing={() => {
          refPassword.current.focus()
        }}
        returnKeyType={'next'}
        keyboardType={'email-address'} />

      <TextInput
        style={styles.input}
        ref={refPassword}
        underlineColorAndroid="transparent"
        placeholder={'PASSWORD'}
        placeholderTextColor={'#CDCED9'}
        autoCapitalize="none"
        value={password}
        secureTextEntry={true}
        onChangeText={(text) => {
            setPassword(text)
        }}
        onSubmitEditing={() => {
          console.log('키보드 done 버튼 클릭')
        }}
        returnKeyType={'done'}
        keyboardType={'default'} />

    </View>
  );
}

const styles = StyleSheet.create({
   welcomeContainer: {
      justifyContent: 'center',
      flex: 1,
   },
   input: { 
     fontSize: 17,
     backgroundColor: '#fff', 
     alignItems: 'center',
     color: '#000',
     borderBottomWidth: 0,
     paddingVertical: 12,
  },
});

export default Example;

이메일을 입력하는 TextInput의 키보드에서 '다음' 버튼을 누르면 포커스가 비밀번호 TextInput으로 넘어가는 걸 확인할 수 있다.

또한 비밀번호 TextInput의 키보드에서 '완료' 버튼을 누르면 콘솔에 '키보드 done 버튼 클릭'이라는 메시지가 출력되는 걸 확인할 수 있다.