React.useRef()

💡 useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook입니다.(공식문서)

무지성 사용하던 Hook을 파악해보자;ㅅ;

useRef 사용

📍값 참조

useRef는 처음에 준 초기값을 current 프로퍼티로 ref객체를 반환한다. 한마디로 정보를 저장하고 읽을수 있게 해준다. 이렇게만 말하면 useState와 차이가 없게 느껴지겠지만 state 값이 변경되면 리랜더링을 촉발하여 변경된 값을 시각적으로 출력시켜준다. 하지만 useRef의 ref 값은 값이 변경되더라도 리랜더링을 촉발시키지 않아 리랜더로 변하지 않아야하는 값을 사용하기에 적절하다.

📍DOM 조작

useRef는 DOM의 노드를 조작할 수 있게 한다.

<input ref={inputRef}/>

위의 예시처럼 사용하게 되면 input의 node를 관리할 수 있게 된다. 여기서 노드 관리는 예시를 예로 들면 input의 속성 (focus, value...) 등을 관리, 사용할 수 있게 되는것을 말한다.

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

직접 useRef() 만들어 보기

useRef의 역할을 알았으니 useRef의 역할을 할 수 있는 커스텀 훅을 만들어보자!

그럼 음 일단 내가 만들 useMyRef는 해야할 역할이
1. 값을 할당 할 수 있어야함
2. 값이 변해도 리랜더링이 되면 안됨
3. dom을 조작할 수 있어야함
4. 원하는 대로 값 변경은 할 수 있어야함

import { useState } from 'react';

export function useMyRef<T>(initValue: T | null) {
  // ref를 저장할 state를 생성. { current: initValue}객체를 통해 current값이 변경되더라도 리랜더링 되지 않게 함
  const [ref, setRef] = useState<{ current: T | null }>(() => ({ current: initValue }));

  // setRef를 통해 ref의 값을 변경.
  const setRefValue = (value: T | null) => {
    setRef({ current: value });
  };

  return [ref, setRefValue];
}

위의 코드를 보면 위에서 만족해야 하는 역할중 값의 할당은 useState를 통해서 처음 initialValue를 설정해주고 state값을 객체로 설정하여 current의 값이 바뀌더라도 리랜더링이 일어나지 않게 설정하였으며 useRef 와 마찬가지로 dom제어 또한 가능하다. 추가로 setRef를 통해 ref값의 변경 또한 가능하게 해 두었다.