[프론트엔드 기술면접]useRef가 필요한 상황

useRef가 필요한 상황을 예시를 들어 설명해주세요

 

useRef의 객체 참조 특징
useRef는 ReactHocks 중 하나로, 하나의 객체 안에서 .current를 통해서 데이터를 관리합니다.
결국 내부의 값이 변하더라도 참조형 데이터의 특성상 주소값은 변하지 않아 변경사항을 감지하지 못하기 때문에 리렌더링 하지 않게 됩니다.

필요한 상황

1. useRef로 컴포넌트 안의 변수 관리

컴포넌트 안에서 조회 및 수정 가능한 변수를 관리할 수 있습니다.
useRef로 변수를 관리하게 되면 변수가 업데이트 된다고 해서 컴포넌트가 리렌더링 되지 않는다.
굳이 리렌더링 할 필요가 없는 변수라면 useRef로 관리 해 주는 것이 효율적이다.

• setTimeout, setInterval을 통해 만들어진 id
• scroll 위치
• 배열에 새 항목을 추가할 때 힐요한 고유 값 key

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>
  );
}

2. DOM 요소에 접근

리액트에서 특정 요소의 크기를 가져온다거나, 포커스를 설정해야 하는 등 특정 DOM을 선택해야 할 상황에 useRef를 사용한다.

• 포커스, 텍스트 선택영역, 미디어의 재생관리
• 애니메이션을 직접적으로 실행시킬 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

import {useRef} from 'react'

export default function Form (){
	const inputRef = useRef(null)
   
   function handleClick(){
   	inputRef.current.focus()
   }
 
 return (
 	<>
   	    <input ref={inputRef}/>
 		<button onClick={handleClick}>Focus thi input</button>
   </>
 )
}