React(리액트)의 useRef에 대해 공부하자!

useRef는 리액트에서 제공하는 훅 중 하나인데 useState와 비교가 많이 되는 훅인 것 같다.

함수형 컴포넌트에서 특정 DOM 요소나 값을 참조할 수 있게 해주는 useRef를 오늘 알아보자!

---

useRef

1. DOM 요소 접근
   1. 특정 DOM 요소에 접근하거나 조작할 때 사용되는데, 직접 DOM 요소에 접근하여 원하는 작업을 수행할 수 있다
   2. querySelector처럼 요소에 접근이 가능 
2. 값 저장
   1. 렌더링 사이에 값을 저장하고 싶을 때 사용되고,. 리렌더링이 발생해도 유지된다.
   2. 컴포넌트가 리렌더링될 때마다 초기화되지 않고, 지속적으로 유지되어야 하는 값을 저장하는 데 사용

useRef의 기본 사용법

//ref 사용
const myRef = useRef(initialValue);

myRef.current

 

initialValue는 참조 객체의 초기값.

리액트는 useRef를 호출할 때마다 동일한 참조 객체를 반환하는데 current라는 속성을 가지며,

이 속성을 통해 참조하는 값이나 DOM 요소에 접근할 수 있다

1. DOM 요소 접근
   1. 특정 입력 필드에 포커스를 설정하거나, 스크롤 위치를 조정하는 등의 작업을 할 때 사용.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

//함수가 실행되면 포커스 주기
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
    //input을 참조
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

export default TextInputWithFocusButton;

 

input 요소에 useRef를 사용하여 참조를 설정

버튼 클릭 시 해당 입력 필드에 포커스를 설정

사용자는 버튼을 클릭하면 자동으로 입력 필드에 포커스가 이동하게 됨

ex)이메일을 안적었는데 제출하기 버튼을 눌렀네? 이메일 입력란으로 포커싱!!

1. 렌더링 사이에 값 저장
   1. useRef`는 렌더링 사이에 값을 저장할 때도 사용
   2. 컴포넌트가 리렌더링되더라도 유지되며, 값의 변경이 리렌더링을 일으키지 않는다!

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

function TimerComponent() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // 타이머 로직
      console.log('Tick');
    }, 1000);

//Ref에 인터벌 아이디를 할당
    intervalRef.current = id;

    return () => {
    //언마운트 되기전 클리어 인터벌
      clearInterval(intervalRef.current);
    };
  }, []);

  return <div>Timer</div>;
}

export default TimerComponent;

 

setInterval로 생성한 타이머 ID를 useRef에 저장하고, 컴포넌트가 언마운트될 때 정리

컴포넌트가 언마운트될 때 타이머를 정리하여 메모리 누수를 방지

컴포넌트의 생명주기 동안 유지되어야 하는 값이나 객체를 관리하는 데 매우 응용할 수 있다.

---

요약)

1. useRef는 React에서 DOM 요소나 값을 참조할 때 사용
2. DOM 요소에 접근하거나 렌더링 사이에 값을 유지
3. .current 속성을 통해 참조에 접근
4. 값의 변경이 리렌더링을 일으키지 않음

---

useState와 useRef의 차이점

- useState는 상태가 변경될 때마다 컴포넌트를 리렌더링 / useRef는 상태 변경이 컴포넌트의 리렌더링 일으키지 않는다.
- useState는 UI 상태의 변경을 관리하는 데 사용 / useRef는 DOM 요소에 접근하거나 렌더링 사이에 값을 유지해야 할 때 사용
- useState를 사용하면 상태를 업데이트하기 위해 설정 함수를 사용(setState()) / useRef는 .current 속성을 직접 변경하여 값을 업데이트