useRef

useRef

useRef는 저장공간(변수 관리), DOM 요소에 접근을 위해 사용이 되는 React Hooks이다.
Ref는 'Reference'의 약자로, '참조'라는 뜻이다.

 

저장공간(변수 관리)

 

리액트 컴포넌트는 State가 변할 때마다 리렌더링이 되면서 컴포넌트 내부  변수들이 초기화가 된다.

내부 변수들이 초기화 된다는 것은 해당 컴포넌트 함수의 변수들이 모두 초기화가 되고 모든 함수 로직 등이 다시 실행되는 것을 의미합니다.

 

이렇게 원하지 않는 렌더링 때문에 곤란할 때, State 대신 Ref안에 값을 저장하면 불필요한 렌더링을 막을 수 있다. 또한 컴포넌트가 아무리 렌더링이 되어도 Ref안에 저장되어 있는 값은 변화되지 않고 유지가 된다.

 

변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 Ref를 사용한다.

 

•  State의 변화 => 렌더링 => 컴포넌트 내부 변수들 초기화
•  Ref의 변화 => No 렌더링 => 변수들의 값이 유지됨
•  State의 변화 => 렌더링 => 그래도 Ref의 값은 유지됨

 

 

DOM 요소에 접근

 

input 요소를 클릭하지 않고 포커스를 주고 싶을 때 많이 사용된다.

 

예를 들어, 로그인 화면이 보여줬을 때 id를 넣는 input을 굳이 클릭하지 않아도 자동적으로

포커스가 되어 있게 해 주면 바로 키보드를 입력해서 id를 입력할 수 있어 편리할 수 있다.

 

document.qurrySelector()와 비슷하다.

 

 

useRefe를 사용하기 위해서 react에서 useRef를 import 받아야 한다.

import { useRef } from 'react';

 

  function App() {
    const inputRef = useRef(); // input 요소를 참조하는 변수 생성

    useEffect(() => { // 마운트될 때 inputRef를 로그에 출력하고 input 요소에 포커스를 설정
      console.log(inputRef);
      inputRef.current.focus();
    }, [])
  
    const loginAlert = () => {
      alert(`환영합니다. ${inputRef.current.value}`);
      inputRef.current.focus();
    }
    return (
      <div className="App">
        <header className="App-header">
          <input ref={inputRef} type="text" placeholder="id"/>
          <button onClick={loginAlert}>Login</button>
        </header>
    </div>
    );
  }