useRef

1. DOM에 직접 접근할 때

2. 지역 변수로 사용할 때 사용
 

1. DOM에 직접 접근할 때

• 훅을 받는 변수를 선언하고, 접근하고 싶은 DOM의 ref 속성에 해당 변수를 값으로!

• ref 객체의 current 프로퍼티(ref.current)로 해당 DOM에 접근 할 수 있음

• 한 ref가 여러 DOM 할당되는 경우에는, ref가 마지막 DOM을 가리킨다

• (새로고침 전에) ref가 할당된 DOM이 제거되면, 해당 ref는 null이 된다

function App() {
	const inputRef = useRef();

	return (
		<>
			<input ref={inputRef}></input>
			<button onClick={()=>inputRef.current.focus()}>Focus</button>
		</>
	)
}

• forwardRef
• 렌더링 함수를 매개변수로 받음. 상위 요소에서 ref 지정을 가능하게 함
• 렌더링 함수의 매개변수1 : 부모로 부터 받은 props
• 렌더링 함수의 매개변수2 : 수신받은 ref

function App() {
  const inputRef = useRef()

  return (
    <div>
      <Input ref={inputRef} value="입력하세요"/>
      <button onClick={()=>inputRef.current.focus()}>focus!</button>
    </div>
  );
}

import React from "react"

const Input = React.forwardRef(({value}, ref) => {
    return (
        <input ref={ref} value={value}/>
    )
})

2. 지역 변수로 사용할 때

• 값이 변경되어도 다시 렌더링 되지 않음(state와의 차이점)
⇒ 그러므로 렌더링 로직에 영향을 미치지 않는 값을 저장할 때 사용!

• useRef(초기값) 으로 초기값 할당, current 객체로 값에 접근

• state처럼 숫자, 문자열, 객체, 함수 등 모든 것을 가리킬 수 있음

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}