UseRef()

useState, useEffect와 같은 React Hooks들은,

React를 class형 프로그래밍이 아닌, 함수형 프로그래밍으로 제어할 수 있도록 고안된 개념들이다.

일반적으로 "use"를 앞에 붙이고 있는 리액트의 기능들이 Hooks이다.

React 공식문서에서는 Hooks의 종류를 다음과 같이 제시하고 있다.

1. Basic Hooks
   useState
   useEffect
   useContext

2. AdditionalHooks
   useReducer
   useCallback
   useMemo
   useRef
   useImperativeHandle
   useLayoutEffect
   useDebugValue
   useDeferredValue
   useTransition
   useId

3. Library Hooks
   useSyncExternalStore
   useInsertionEffect

오늘 살펴볼 Hooks는, useRef다.

---

 

useRef는 useStates, useEffect와 같은 Basic Hooks와는 조금 다른 특징을 갖고 있다.

① useRef는 선언형 프로그래밍인 React의 특성과 배치된다.
why? useRef는 DOM 객체에 직접 접근하여 제어한다. 이는 1개의 컴포넌트가 1개의 기능만을 담당하게 하고 이를 트리구조로 구조화하여 만들어 최종 단계에서 return()으로 HTML을 렌더링하는 React의 프로그래밍 방식과는 차이가 있다.

② useRef는 함수 작동시에 리렌더링이 되지 않는다.
why? useRef는 DOM에 직접 접근하여 값을 저장함으로 구성요소의 React의 단위 수명 전체에 걸쳐 지속된다.

③ useRef를 사용할 수 있는 경우,
focus / text selection / media playback / 애니메이션 적용 / d3.js, greensock 등 DOM 기반 라이브러리 활용

---

useRef 기본문법

// 출처 : React 공식문서
// refContainer : useRef가 적용될 컴포넌트에 넣어줄 함수
// useRef.current : 입력받은 변환가능한 ref객체를 반환
// initialValue : 전달된 초기값

const refContainer = useRef(initialValue);

useRef의 initialValue는 통상 null이 입력된다. (초기에는 아무것도 입력되지 않은 상태일 것이기에..)

이후, useRef.current 속성이 전달된 인수를 받으면 이를 ref 객체로 반환하는데,

이 지점이 useState와 같은 다른 Basic Hooks와 가장 큰 차이를 갖는다.

통상 useState와 같은 함수는 setState에 전달된 인수를 받으면서 리렌더링이 될 때마다 새로운 값을 반환하지만,

useRef는 모든 렌더링 상황에서 useRef.current 속성으로 전달받은 객체 {current : ...}를 항상 동일하게 제공한다.

 

// 출처 : React 공식문서

function TextInputWithFocusButton() { // 1. input 박스를 focus시키는 기능
  const inputEl = useRef(null); // hook함수를 사용하여 inputRef 객체 생성
  const onButtonClick = () => {
    inputEl.current.focus(); // 3. onButtonClick 함수로 current 값을 제어
  };
  return (
    <>
      {/* 2. input 엘리먼트의 prop에 전달 === current 속성에 input 엘리먼트가 저장됨*/}
	  <input ref={inputEl} type="text" />
      {/* 4. 함수의 실행을 onClick 이벤트로 제어 (button 엘리먼트에!) */}
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}