[RN] useRef 란?

전에 useRef 에 대해서 공부를 한적이 있었는데

오래된건지.. 좀 까먹어서 ㅠㅠㅠ

조금 더 자세히 공부하고자 포스팅하게 되었다 

 

1. useRef

여기서 Ref 는 참조(Reference) 이담

즉!!!! DOM 요소나 컴포넌트의 인스턴스에 대한 참조를 관리할 때 사용된다. 

원래 다른 컴포넌트는 상태 변화나 부모 컴포넌트의 변경에 의해 다시 그려지지만

useRef를 사용하면 컴포넌트가 리렌더링되더라도 useRef 에 저장된 값은 초기화되지 않고 그대로 유지된다. 

 

따라서.. useRef 로 저장한 값은 컴포넌트가 리렌더링될 때도 유지되면서 값이 변경되어도 컴포넌트를 리렌더링 하지 않느다. 

따라서 리렌더링과는 별개로 값을 저장하거나 컴포넌트에 접근하는데 유용하다. 

 

 

🔇 포커스를 설정하거나 스크롤 위치를 변경하는 경우에 유용하게 사용할 수 있다. 
💡React Native에서는 DOM 요소 대신 React Native 컴포넌트(TextInput, View 등)를 사용 하여 직접적으로 접근함 ! 

 

 

2. 기본 사용법

1️⃣ 기본 생성

import { useRef } from 'react';

const myRef = useRef(null);  
// null을 초기값으로 주는 참조 생성

 

* 타입스크립트에서는 타입을 명시해줄 수 있다. 

const myRef = useRef<TextInput | null>(null);  
//타입을 명시해줄 수 있는데
// TExtInput 타입이나 Null 타입을 가질 수 있다는 것을 명시해주고
// 초기값은 null 로 설정해준다.

 

2️⃣ 참조객체 반환

const hihilongRef = useRef(null);

// hihilongRef.current는 참조된 DOM 요소 또는 값
hihilongRef.current;

 

반환된 객체는 current 라는 속성을 가지고 있으며, 이를 통해 참조된 값 또는 요소에 접근할 수 있다.

 

특히..current는 useRef가 생성한 참조객체에서 가장 중요한 속성인데!

이 속성은 참조하고자 하는 DOM 요소나 값을 담고 있다. 

컴포넌트가 처음 렌더링될 때에는 초기값이 null 이지만 컴포넌트가 실제로 렌더링되고 나면 이 값이 해당 DOM 요소나 값으로 바뀌게 된다. 우리는 이 해당 요소 current 를 참조할 수 있는 것이다. 

 

 

3. useState  와의 차이점 ? ?

useState는 컴포넌트의 상태를 관리하기 위한 것이여서, 주로 UI 업데이트에 사용되는 반면

useRef는 DOM 요소의 참조나 리렌더링과 관련 없는 값을 저장하는 데 사용된다. 

 

 

4. innerRef  ? 

useRef 는 포커스를 관리 하고 싶을 때 자주 사용이 되는데 

그때 InnerRef 를 사용하면 유용하다. 

 

🤔 어떻게 ? 

 

 

const innerRef = useRef<TextInput | null>(null);
const handlePressInput = () => {
	innerRef.current?.focus();

 

• | <- 유니온 타입을 설정해주어 TextInput 타입 혹은 Null 타입을 가질 수 있다고 설정해준다. 
• 초기값은 null 로 설정해주고 
• handlePressInput 함수를 만들어 innerRef의 current 속성을 참조해주도록 한다. 
• 그리고 current 속성을 참조하여 focus 를 설정해준다. 
• 그리고.. innerRef.current?. 라는 옵셔널체이닝을 사용하여 innerRef.current가 존재하는 경우(null 이나 undefined가 아닌) focus를 호출하고 null 이나 undefined 라면 undefined 를 반환하게끔 해준다. 

 

 

 

import React from "react";
import {TextInput, View,TextInputProps} from 'react-native';
import { useRef } from "react";


function InputField({disabled, ...props}:InputFieldProps) {

    const innerRef = useRef<TextInput | null>(null);
    const handlePressInput = () => {
        innerRef.current?.focus();
    };

    return (
        <Pressable onPress={handlePressInput}>
        <View >
            <TextInput 
            editable={!disabled} 
            {...props} >  
            </TextInput>

        </View>
        </Pressable>
    )
};


export default InputField;

 

• useRef로 TextInput의 참조를 생성하여 innerRef에 저장합니다.
• TextInput이 렌더링되면, innerRef.current가 해당 TextInput을 참조하게 되고
• Pressable을 클릭하면, handlePressInput이 호출되어 TextInput에 포커스가 설정된다.