useRef(초기값)

useRef는 변수 관리와 DOM 요소에 접근할 때 유용한 React Hook이다.

• useRef()는 {current: 초기값} 형태의 객체를 리턴한다.

import useRef from "react";

function App(){
  // 초기값이 있는 경우
  const ref1 = useRef();
  console.log(ref1) // {current: undefined}
  
  // 초기값이 없는 경우
  const ref2 = useRef('Hello');
  console.log(ref2) // {current: 'Hello'}
}

• useRef()가 리턴하는 객체는 수정이 가능하기 때문에 언제든지 값을 변경할 수 있다.

function App() {

  const ref = useRef('hello');

  ref.current = 'world'
  console.log(ref) // {current: 'world'}

}

변수 관리

• ref의 값이 변경되어도 렌더링이 발생하지 않기 때문에 컴포넌트 내 변수들의 값을 유지할 수 있다.

• 리턴된 객체는 컴포넌트의 전 생애 주기동안 유지 되기 때문에, 컴포넌트가 리렌더링 되어도 값이 그대로 유지된다.

• useState : state 변경 → 변경될 때 마다 계속 리렌더링 됨 → 화면에 계속해서 변경된 값이 출력되고, 그 값을 유지한다.

• useRef : ref 변경 → 아무리 변경해도 리렌더링 X → 렌더링이 발생하지 않는 이상 화면에 출력되지 않음(하지만 내부적으로는 값이 변경 됨. 콘솔에서 확인할 수 있음) → 이 후에 렌더링이 발생할 경우 변경된 값이 화면에 출력 되고, 그 값을 유지 한다.

• 일반 변수(var, let) : 일반 변수값 변경 → 아무리 변경해도 리렌더링 X (내부적으로는 값이 변경 됨) → 이 후에 렌더링이 발생할 경우 값이 초기화되고, 초기화된 값이 화면에 출력 됨.

DOM 요소 접근

useRef를 이용해서 마치 document.querySelector처럼 DOM 요소에 접근할 수 있다.

function App() {
  
  const ref = useRef();
  
  console.log(ref) // {current: input}
  
  return (
    <>
      <input ref={ref}></input>
    </>
  );
}

👉 화면이 처음 렌더링 되었을 때 input 활성화 시키기

import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();
  
  // 처음 한번 렌더링 시에만 콜백함수를 실행하도록 useEffect를 설정
  useEffect(() => {
    ref.current.focus()
  }, [])
  
  return (
    <>
      <input ref={ref} type='text' placeholder="아이디"></input>
    </>
  );
}