[React] useRef

리액트 자습서 내용 중 useRef 참고
https://ko.reactjs.org/docs/hooks-reference.html#useref

useRef

리액트에서 제공되는 hook api 중 하나이다.
보통 리액트에서 값을 다룰 때는 useState를 통해 다룬다.

가장 useState의 경우 값이 변경될때마다 렌더링을 하게된다.
렌더링은 컴포넌트의 변수들이 초기화됩니다.

반면 useRef의 경우 값이 변경되더라도 렌더링을 하지 않기에
불필요한 렌더링을 막을 수 있고 더불어 컴포넌트가 렌더링 되더라도
useRef의 변수는 값이 유지됩니다.

// 생성 코드
const refContainer = useRef(initialValue);

사실 값이 변하지 않는 본질적인 이유는 .current 때문이다.

useRef로 만들어진 변수에서 값을 접근할 때는 current 프로퍼티를 사용한다.

const count = useRef(1);

이렇게 만들어진 count 변수는 count.current를 통해 1이라는 값을 접근할 수 있으며, 값을 변화시킬 때도 current를 접근하여 변경시킨다.

count.current += 1

이런 특성으로 인해 일반적으로는 DOM에 접근할때 자주 쓰인다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}