RN_useRef

📢 useRef란?

useRef는 React에서 값을 저장하고, 변경해도 리렌더링되지 않는 변수를 만들거나, DOM 요소를 직접 조작할 때 사용하는 훅

---

✅ 1. useRef의 주요 특징

1. 리렌더링 없이 값 유지 (state와 차이점)

   • state는 값이 바뀌면 컴포넌트가 리렌더링되지만, useRef는 값이 바뀌어도 리렌더링되지 않음.

2. DOM 요소 접근 가능

   • ref를 활용해 input, div 같은 HTML 요소에 직접 접근하고 조작 가능

3. 초기 값 설정 가능 (useRef(initialValue))

   • useRef를 호출하면 { current: initialValue } 객체가 반환됨

---

✅ 2. useRef 사용 예제

1️⃣ 렌더링 없이 값 유지하는 경우

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

const Counter = () => {
  const countRef = useRef(0); // 렌더링 없이 값 저장
  const [count, setCount] = useState(0); // 리렌더링 발생

  const increaseRef = () => {
    countRef.current += 1;
    console.log("useRef 값:", countRef.current);
  };

  const increaseState = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>useRef 값: {countRef.current} (변경돼도 화면엔 안 보임)</p>
      <p>useState 값: {count} (화면에도 반영됨)</p>
      <button onClick={increaseRef}>useRef 증가</button>
      <button onClick={increaseState}>useState 증가</button>
    </div>
  );
};

✅ useRef 값이 바뀌어도 화면이 리렌더링되지 않음
✅ useState 값이 바뀌면 화면이 리렌더링됨

---

2️⃣ DOM 요소 직접 조작하기

import React, { useRef } from "react";

const FocusInput = () => {
  const inputRef = useRef(null); // input 요소에 접근하기 위한 ref 생성

  const focusInput = () => {
    inputRef.current.focus(); // input 요소에 포커스
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="이곳에 입력하세요" />
      <button onClick={focusInput}>포커스 이동</button>
    </div>
  );
};

✅ useRef를 사용하면 input 요소에 직접 접근하여 focus()를 호출 가능

---

✅ 3. useRef vs useState 차이

	useRef	useState
값 변경 시 리렌더링?	❌ 리렌더링 안 됨	✅ 리렌더링 됨
초기값 설정 가능?	✅ useRef(initialValue)	✅ useState(initialValue)
DOM 접근 가능?	✅ 가능 (ref.current)	❌ 직접 접근 불가
주 사용 사례	값 유지, DOM 조작, 이전 값 저장	상태 업데이트 및 UI 반영

---

결론

• useRef는 렌더링 없이 값 유지할 때나 DOM 요소 직접 조작할 때 사용

• useState는 값이 변경될 때 리렌더링이 필요한 경우 사용

• useRef를 state 대체용으로 사용하는 것은 잘못된 패턴 → useRef 값이 바뀌어도 컴포넌트가 업데이트되지 않기 때문