[React] useRef

📚 useRef란 무엇인가요?

useRef는 리액트 훅 중 하나로, 변경 가능한 ref 객체를 반환해요. 이 ref 객체는 .current 속성을 가지고 있어요. 가장 흔한 사용 예는 DOM 요소에 직접 접근하는 것이지만, 값이 변경되어도 컴포넌트가 재렌더링되지 않는 변수를 저장하는 데에도 사용할 수 있어요.

 

여러분이 큰 도서관에 있다고 상상해 보세요. 이 도서관에는 수많은 책들이 있고, 각각의 책은 특정한 위치에 있어요. 여기서 '책'은 DOM 요소나 컴포넌트를 대표하고, '책의 위치'는 그 요소나 컴포넌트에 대한 참조(Reference)를 상징해요. useRef는 마치 책갈피처럼 특정한 책(요소/컴포넌트)을 쉽게 찾아갈 수 있는 방법을 제공해요. 여러분이 그 책갈피를 가지고 있다면, 도서관 어디서든 그 책을 빠르게 찾아갈 수 있어요.

 

---

🖥️ useRef 사용 예시

1. DOM 요소에 접근하기

import React, { useRef } 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는 특정 입력 필드에 직접 접근하는 데 사용됩니다. inputEl은 input 요소를 참조하고, 버튼 클릭 시 해당 요소에 자동으로 포커스를 맞춥니다. 이는 DOM 요소에 직접적으로 작업할 필요가 있을 때 매우 유용합니다.

2. 값 저장하기

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

function TimerComponent() {
    const count = useRef(0);

    useEffect(() => {
        setInterval(() => {
            count.current += 1;
        }, 1000);
    }, []);

    return <p>Timer: {count.current}</p>;
}

이 예시에서 useRef는 컴포넌트 라이프사이클 동안 변경되지 않는 값을 유지하는 데 사용됩니다. count는 타이머의 카운트를 저장하며, 이 값은 컴포넌트의 다시 렌더링에 영향을 주지 않으면서도 각 렌더링 간에 유지됩니다. 이는 예를 들어 타이머, 애니메이션 등에서 유용하게 사용될 수 있어요.

 

---

🤔 useRef vs useState

리액트에서 useRef와 useState는 모두 컴포넌트의 상태를 관리하는 데 사용되지만, 몇 가지 중요한 차이점이 있어요:

1. 렌더링 트리거

• useState: useState를 사용하여 상태를 업데이트하면 컴포넌트가 재렌더링돼요. 이는 상태가 UI에 직접적으로 영향을 미칠 때 유용해요.
• useRef: useRef로 생성된 객체의 .current 속성을 변경해도 컴포넌트의 재렌더링이 트리거 되지 않아요. 이는 렌더링 사이클과 무관한 값을 저장하는 데 적합해요.

2. 사용 목적

• useState: 주로 컴포넌트의 동적인 데이터를 관리하는 데 사용돼요. 예를 들어, 사용자 입력, 서버 응답 등 UI에 반영되어야 하는 데이터에 적합해요.
• useRef: 주로 DOM 요소에 접근하거나, 렌더링 사이클에 영향을 주지 않는 값을 저장하는 데 사용돼요. 예를 들어, 타이머 ID, 이전 상태 값 등에 사용돼요.

3. 사용 예제 코드

• useState는 상태 변경과 UI 업데이트에 적합하고, useRef는 DOM 접근이나 렌더링과 무관한 값의 저장에 유용해요.

// useState 예제: 상태 업데이트와 컴포넌트 재렌더링

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(count + 1); // 상태 업데이트
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={handleClick}>Increase</button>
        </div>
    );
}

이 예제에서 count 상태가 변경될 때마다 Counter 컴포넌트는 재렌더링됩니다. 이는 UI가 항상 최신 상태를 반영하도록 합니다.

// useRef 예제: DOM 요소 접근 및 렌더링 사이클과 무관한 값 저장

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

function Timer() {
    const intervalRef = useRef();
    const count = useRef(0);

    useEffect(() => {
        intervalRef.current = setInterval(() => {
            count.current += 1;
            console.log(`Timer: ${count.current}`);
        }, 1000);

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

    return <p>Check the console for timer updates.</p>;
}

이 예제에서 intervalRef는 타이머 ID를 저장하고, count는 타이머의 카운트를 저장합니다. count.current의 변경은 컴포넌트의 재렌더링을 트리거하지 않으며, UI에 직접적으로 반영되지 않습니다.

 

---

🚨 주의할 점

useRef로 생성된 객체는 리액트의 데이터 흐름 외부에 존재하기 때문에, .current 속성을 변경해도 컴포넌트가 재렌더링되지 않아요.
또, DOM 요소에 접근할 때는 컴포넌트가 마운트 된 후에만 ref 객체가 유효하므로, 항상 null 체크를 해야 합니다.

 

---

📖 결론

useRef는 리액트에서 DOM 요소에 접근하거나, 렌더링과 무관한 데이터를 저장하는 데 매우 유용한 훅이에요. 이를 통해 더 다양한 상호작용과 성능 최적화를 구현할 수 있어요.

 

---

🔗 추가 정보

• 리액트의 useRef에 대한 더 깊은 이해를 원하신다면, 리액트 공식 문서에서 자세한 정보를 찾아볼 수 있어요.