React , Hook_ useRef 변수아닌 변수같은 너.

useRef ?

 

useRef 는 무엇일까 ? 

useRef는 변수의 단점을 보완한 변수같은 아이라고 볼 수 있다고 나는 생각한다.

즉 , 일반 변수는 리랜더링이 이루어질때마다 함수가 재실행이되며 , 초기화가 되는 점을 보완하여 나왔고.

리랜더링이 되더라도 값을 유지할수 있는 독립적인 저장공간 같은 역할을 한다.

 

특징

1. 직접적으로 HTML 의 돔요소를 직접 제어한다.

우리는 리액트를 통하여 가상DOM을 건들이고 ,

가상돔과 직접적인 HTML의 DOM 을 비교하여 랜더링을 하는 작업을 했었다.

하지만 Ref는 가상돔의 상태값은 변하지 않았지만 직접적인 HTML의 DOM요소를 터치할 수 있다.

즉, 가상돔의 상태값은 변하지 않았기 때문에 ref의 값이 변한다고 해도 랜더링 되지 않는다.

 

2. focus의 속성을 통해 우리가 지정한 요소로의 포커싱 효과를 준다.

 

3.랜더링에 방해받지않는 저장공간으로서,

랜더링에 방해받지 않아야하는 변수값들을 저장하여 사용할 수있다.

 

사용방법 : 직접 돔요소를 건들여서 값을 초기화한것 처럼 보이게 하자 !

import {useState , useRef } from 'react';

 

1.useRef 를 import.

 

const textRef = useRef();

 

2.useRef()를 통한 ref객체 형성.

 

const ref객체명 = useRef(객체의 초기값); 

 

객체의 값을 접근하기 위해서는 

current 라는 속성을 접근해야 값이 나온다.

객체명.current = 객체의 값

        <div className='body'>
            <h3>
                useRef 래퍼런스 테스트
            </h3>
            <div>
                <input ref={textRef} value={text} onChange={onChangeText}/>
                <button onClick={onClickBtn}>실행완료</button>
            </div>
        </div>

 

3.태그 내의 ref={ref객체명}

 

input Tag 에서 ref={textRef} 명령으로 textRef 가 DOM 입력폼에 접근하도록 설정

그러면 textRef 를 이용하여 입력폼을 직접 조작할 수 있음.

 

    const onClickBtn = () => {  
        // test1) 클릭후 입력폼 초기화에 적용
        alert(`버튼을 클릭했어요 text(input의 value) : ${text}`);
        textRef.current.value='';
        console.log(`버튼을 클릭했어요 text(input의 value) : ${text}`);
        
        } //onClickBtn

 

4. ref객체 위치를 지정한 Dom요소의 input 의 value를 초기화.

 

state를 통한 가상Dom요소가 변화된것은 아니기 때문에 , state의 값이 초기화가 된것은 아니다.

state 값은 유지된 채 초기화가 이루어졌다는 것은 랜더링이 일어나지 않았다는 뜻.

Dom요소가 current.value=''; 를 통해 초기화 된 후

다시 입력하는 순간 입력에 의한 onChange이벤트로 input의 value가 변하는 것을 확인할 수 있다.

 

 

- current.value='까꿍'

    const onClickBtn = () => {  
        // test1) 클릭후 입력폼 초기화에 적용
        alert(`버튼을 클릭했어요 text(input의 value) : ${text}`);
        textRef.current.value='까꿍';
        console.log(`버튼을 클릭했어요 text(input의 value) : ${text}`);

 

-

 

• state와 ref 의 차이

textRef.current.value=''; ⇒ 랜더링 X

setText(''); ⇒ 랜더링 O

 

포커스특징을 이용.

    const onClickBtn = () => {  
        if(text.length<3){
            textRef.current.focus();
        }else{
            textRef.current.value=''; //값을 클리어
        }
   }
   return (
        <div className='body'>
            <h3>
                useRef 래퍼런스 테스트
            </h3>
            <div>
                <input ref={textRef} value={text} onChange={onChangeText}/>
                <button onClick={onClickBtn}>실행완료</button>
            </div>
        </div>
    );

현재 위치를 ref= 를 통해 input 요소를 지칭하고,

current.focus() 를 통해 문자길이가 3미만일때 input 요소를 포커스 하겠다.

그렇지 않으면 HTML돔요소의 input 태그의 값을 클리어 하겠다.

 

 

Ref 를 사용해야 하는 경우

 

1. 랜더링에 방해받지 않아야하는 변수를 사용해야 할 때.

 

2. 포커스 , 텍스트 선택영역 , 미디어 재생을 관리할 때.

 

3.DOM요소에 대한 참조를 저장하고 추적해야할 때.

 

4.상태값 이전 상태를 저장할 때

 

...등등 많겠지만 단점도 분명하게 존재하기 때문에

(ex) 랜더링에 방해받지 않기 때문에 나중에 오류추적하기가 힘듬)

적절히 사용하는 것이 옳겠다.