[React Native] useRef

useRef

특정 컴포넌트를 선택해야할 때 사용하는 Hooks 함수

코드

const ref = useRef(초기값);

예제

import React, {useState, useEffect, useRef} from 'react';
import { StyleSheet, SafeAreaView, TextInput } from "react-native";

const styles = StyleSheet.create({
  textInput: {
    marginTop: 20,
    marginBottom: 10,
    paddingHorizontal: 10,
    height: 40,
    borderRadius: 10,
    borderColor: 'gray',
    borderWidth: 1
  }
})

const Form = () => {
    const [name, setName] = useState('');
    const [number, setNumber] = useState('');

    //useRef생성
    const refName = useRef(null);
    const refNumber = useRef(null);

    useEffect(() => {
      //마운트시 name에 포커스되도록 설정
        refName.current.focus();
    }, []);

    return(
      <SafeAreaView>
        <TextInput
            value={name}
            style={styles.textInput}
            onChangeText={text => setName(text)}
            placeholder='name'
            //이름을 입력받는 TextInput컴포넌트의 ref로 설정
            ref={refName}
            //키보드 완료 버튼을 next로
            returnKeyType='next'
            //next시 포커스를 번호입력으로 이동
            onSubmitEditing = {() => refNumber.current.focus()}
        />
        <TextInput
            value={number}
            style={styles.textInput}
            onChangeText={text => setNumber(text)}
            placeholder='number'
            //번호를 입력받는 TextInput컴포넌트의 ref로 설정
            ref={refNumber}
            //키보드 완료 버튼을 done으로
            returnKeyType='done'
        />
      </SafeAreaView>
    )
};

export default Form;

실행 결과

마운트시 name에 포커스 되어있다.

name입력 후 엔터를 누르면 number에 포커스 되어있다.