useRef의 다양한 사용 예시

useRef란?

React의 함수형 컴포넌트에서 ref를 생성하고 관리하는 hook이다. 주로 DOM 노드에 접근하는 용도로 사용한다.

useRef 사용 예시

텍스트 입력칸

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    inputRef.current.value = '';
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">완료</button>
    </form>
  );
}

input에 접근해서 텍스트 작성후 완료 버튼이나 엔터키를 누르면 input칸이 초기화 되는 코드를 작성했다. input 뿐만 아니라 textarea 역시 가능하다.

이전 값과의 비교

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

function Timer() {
  const intervalRef = useRef(null);
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(intervalRef.current);
  }, []);

  function handleStop() {
    clearInterval(intervalRef.current);
  }

  return (
    <div>
      <p>Seconds: {seconds}</p>
      <button onClick={handleStop}>Stop</button>
    </div>
  );
}

setTimeout, setInterval과 같은 타이머 함수에서 이전 값을 비교하려면 이전 값이 필요하다. 이 경우 useRef를 사용하면 이전 값을 저장할 수 있다.

모달 외부 클릭시 모달창 닫기

const searchRef = useRef;
.
.
.
  useEffect(() => {
    const clickOutsideModal = (e) => {
      if (ref.current && !ref.current.contains(e.target)) {
        setOpenModal(false);
      }
    };

    document.addEventListener("mousedown", clickOutsideModal);

    return () => {
      document.removeEventListener("mousedown", clickOutsideModal);
    };
  }, [ref, openModal]);

useRef의 current 속성을 이용해 모달 컴포넌트의 내부와 외부를 인식하게 할 수 있다.

마운트 시 state 미변경

import { useRef, useEffect } from 'react';

function ExampleComponent() {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      // 최초 렌더링 시
      console.log('Component mounted');
      isFirstRender.current = false;
    } else {
      // 두 번째 렌더링 이후
      console.log('Component updated');
    }
  });

  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

1. useRef를 사용하여 isFirstRender라는 변수를 선언하고 초기값을 true
2. useEffect 훅에서 isFirstRender.current 값이 true일 시 실행되는 코드(=컴포넌트가 마운트될 때 실행될 코드) 작성
3. 2번 실행 후 isFirstRender.current 값을 false로 업데이트