useRef

특정 DOM을 가리킬 때 사용하는 Hook 함수.

리액트로 작업하다 보면 돔 요소에 직접 접근해야 할 때가 있다. 예를 들어, 돔 요소에 포커스를 주거나 돔 요소의 크기나 스크롤 위치를 알고 싶은 경우다. 이 때 ref 속성값을 이용하면 자식 요소에 직접 접근할 수 있다.

ref

: ref는 JS의 getElementById()처럼, component의 어떤 부분을 선택할 수 있게 해주는 방법이다.
리액트에 있는 모든 component는 reference element를 가지고 있어서,
어떤 component에 ref={변수명} 을 넣어주면, 해당 component를 참조하게 된다.

useRef 사용하기

import React, {useRef} from 'react'
function App(){

  const inputRef= useRef();
  
  const onButtonClick = () => {
    inputRef.current.focus()
  };
  
  return (
    <div>
      <input ref={inputRef} type='text' />
      <button onClick={onButtonClick}>버튼</button>
    </div>
  )
}

1) useRef( )를 사용해 Ref객체 만들기
2) 만든 ref객체를 ref라는 값으로 선택하고 싶은 DOM에 설정하기
3) 해당 객체를 활용한 작업 설정 .current.focus()
-> Ref객체의 .current값은 선택한 DOM을 가리키게 된다!

useRef를 활용해 컴포넌트 안에 변수를 만드는 법

컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것
주로 비동기함수에 쓰이는 id나 외부라이브러리 사용시 생성된 인스턴스, scroll 위치 등인데, useRef를 활용하면 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다.

import React, { useRef } from 'react';

와 같이 useRef 함수를 불러온다.

 const users = [
    {
      id: 1,
      height: 185,
      weight: 75,
    },
    {
      id: 2,
      height: 167,
      weight: 50,
    },
    {
      id: 3,
      height: 173,
      weight: 80,
    }
  ]

  const nextId = useRef(4); //초기값을 4로 설정

  const onCreate = () => {
    console.log(nextId.current);	// 4
    nextId.current += 1; // 생성이 되면 nextId 1증가
  }

useRef로 관리한 이유는 이값이 바뀐다고 해서 컴포넌트가 리랜더링이 될 필요가 없기때문이다