useRef 훅 좀 더 깊게 쑥쑥 파보자

useRef

useRef는 useState와 비슷하지만 useRef의 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있고, 값이 변하더라도 렌더링을 발생시키지 않는 특징이 있다. 리엑트의 흐름 시스템에서 벗어난 느낌의 훅이다.

 

즉 컴포넌트가 다시 렌더링 될 때에도 유지되는 변수를 만들 수 있는것.

이를 활용해서 DOM요소에 접근하거나 컴포넌트 간의 데이터 공유, 또는 상태를 유지하는 데 유용하다.

 

그럼 외부 변수 활용하면 되는거 아님? 할 수 있지만. 몇가지 문제가 생긴다.

1. 컴포넌트가 실행되어 렌더링되지 않았음에도 값이 존재하게 돼서 메모리 낭비발생.
2. 컴포넌트가 여러번 생성되는데 하나의 값을 바라보기 때문에 일반적으로 인스턴스하나당 하나의 값으로 표현하는 것이 일반적이다.

DOM요소 접근

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current`는 마운트된 input 요소를 가리킵니다.
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useRef를 사용하여 DOM 요소를 직접 조작할 수 있다. 예로 포커스를 설정하거나 스크롤 위치를 조정하는 경우에 유용하다.

이미지, 비디오 조작, 인풋 포커싱 등등에 사용  

 

 

상태 유지

import React, { useRef, useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const getCount = () => {
    alert(`Current count is: ${countRef.current}`);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={getCount}>Show Current Count</button>
    </div>
  );
}

useRef는 컴포넌트가 리렌더링되더라도 유지되는 변수를 만들 수 있다 이 변수는 컴포넌트의 상태를 저장할 수 있지만 상태 변경 시 컴포넌트를 리렌더링하지 않기때문에 유용하게 사용할 수 있다.

 

값을 캐싱하기

import React, { useRef, useEffect } from 'react';

function ChatApp() {
  const socketRef = useRef(null);

  useEffect(() => {
    socketRef.current = new WebSocket('ws://chatserver.example.com');
    socketRef.current.onopen = () => {
      console.log('WebSocket open');
    };
    return () => {
      socketRef.current.close();
    };
  }, []);

  return <div>Chat Application</div>;
}

컴포넌트가 리렌더링되는 동안에도 변경되지 않는 값을 저장하는 데 사용할 수 있다. 예를 들어 이전 렌더링의 값을 유지하거나 외부 라이브러리 인스턴스를 유지할 때 유용하다.

 

핵심

• useRef는 { current: initialValue } 형태의 객체를 반환
• useRef로 생성된 참조는 컴포넌트의 생애 주기 동안 유지
• 값이 변경되더라도 참조가 변경되지는 않는다. 이는 useRef를 상태 값처럼 변경 사항에 의해 리렌더링되지 않게 한다.