[react-native] Hooks(3) useRef

이 글은 <처음 배우는 리액트 네이티브(김범준, 한빛미디어)>를 읽고 이해한 바를 바탕으로 작성되었습니다.

GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다.

 

💡useRef

useRef는 특정 컴포넌트를 선택할 때 사용하는 hooks 함수이다.

const ref = useRef(initialValue);

useRef를 사용할 때 주의해야 할 점은 

1. 컴포넌트의 ref로 지정하면 생성된 변수에 값이 저장되는 것이 아니라, 변수의 .current property에 해당 값을 담는다는 것이다.
2. useRef의 내용이 변경되어도 컴포넌트는 다시 렌더링되지 않는다.

import React, {useState} from 'react';
import styled from 'styled-components/native';
import Form from './components/Form'
import Button from './components/Button'

const Container = styled.View`
    flex: 1;
    background-color: #fff;
    justify-content: center;
    align-items: center;
`;

const App = () => {
    const [isVisible, setIsVisible] = useState(true);

    return (
        <Container>
            <Button
                title = {isVisible? 'Hide' : 'Show'}
                onPress={() => setIsVisible(prev => !prev)} />
            {isVisible && <Form />}
        </Container>
    );
};

export default App;

/* src/App.js */

import React from 'react';
import styled from 'styled-components/native';

const Container = styled.TouchableOpacity`
    background-color: #CDF3A2;
    border-radius: 15px;
    padding: 15px 30px;
    margin: 10px 0px;
    justify-content: center;
`;

const Title = styled.Text`
    font-size: 24px;
    font-weight: 600;
    color: #000000;
`;

const Button = ({title, onPress}) => {
    return(
        <Container onPress={onPress}>
            <Title>{title}</Title>
        </Container>
    )
};

export default Button;

/* src/components/Button.js */

import React, {useState, useEffect, useRef} from 'react';
import styled from 'styled-components/native';

const StyledTextInput = styled.TextInput.attrs({
    autoCapitalize:'none',
    autoCorrect: false,
})`
    border: 1px solid #757575;
    padding:10px;
    margin: 10px 0;
    width: 200px;
    font-size: 20px;
`;

const StyledText = styled.Text`
    font-size: 24px;
    margin: 10px;
`;

const Form = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');

    const refName = useRef(null);
    const refEmail = useRef(null);

    useEffect(() => {
        console.log('\n====== Form Component Mount ======\n');
        refName.current.focus();
        return () => console.log('\n====== Form Component Unmount ======\n');
    }, []);
    
    return(
        <>
        <StyledText>Name: {name}</StyledText>
        <StyledText>Email: {email}</StyledText>
        <StyledTextInput
            value={name}
            onChangeText={text => setName(text)}
            placeholder='name'
            ref={refName}
            returnKeyType='next'
            onSubmitEditing = {() => refEmail.current.focus()}
        />
        <StyledTextInput
            value={email}
            onChangeText={text => setEmail(text)}
            placeholder='email'
            ref={refEmail}
            returnKeyType='done'
        />
        </>
    )
};

export default Form;

/* src/component/Form.js */

useRef를 이용해 refName과 refEmail을 생성하였다.

 

useEffect에서 컴포넌트가 마운트될 때, 포커스가 name을 작성하는 StyledTextInput 컴포넌트에 있도록 하였다.

StyledTextInput에서 returnKeyType을 'next'로 설정하여 name 작성 뒤 enter를 치면 email을 작성하는 StyledTextInput 컴포넌트로 포커스가 이동되도록 설정하였다. email을 작성하는 StyledTextInput에서 returnKeyType은 'done'으로 설정하여 이메일 입력 후 enter를 누르면 입력하는 키보드가 사라지도록 하였다.

 

직접 보면, Show를 누르고 Form 컴포넌트가 mount되었을 때, 자동으로 바로 name을 입력하는 인풋컴포넌트에 포커스가 잡혀있는 것을 확인할 수 있다.

name 입력 후, enter를 누르니 바로 email로 포커스가 넘어가고, email입력 후, enter를 누르면 키보드 창이 종료된다.