[React] useRef

useRef: 비제어 컨트롤러로 DOM 직접 조작

비제어 컨트롤러란?

비제어 컨트롤러는 DOM 요소에 직접 접근하여 값을 관리하는 방식으로, 실시간 값 변화 감지 불가

useRef를 사용해 DOM 요소 참조

useRef란?

React에서 제공하는 Hook으로, 값을 보관하고 관리할 수 있는 저장소

주요 특징:

• 컴포넌트가 리렌더링되어도 동일한 참조값 유지
• 값이 변경되어도 컴포넌트가 리렌더링되지 않음
• DOM 요소에 직접 접근할 때 사용되며, current 프로퍼티를 통해 값을 안전하게 관리

🤔 DOM 조작에 querySelector 대신 useRef를 사용하는 이유
querySelector는 실제 DOM을 직접 조작하여 React의 가상 DOM 시스템과 충돌 가능
컴포넌트가 리렌더링될 때마다 참조가 깨질 수 있고, React의 단방향 데이터 흐름을 방해할 수 있음
❌ React에서도 직접적인 DOM 조작을 권장하지 않음

예시코드

import { useRef } from "react";

export default function App() {
  const inputRef = useRef<HTMLInputElement | null>(null);

  const handleSubmit = () => {
    console.log(inputRef.current?.value); // input 값 가져오기
  };

  return (
    <>
      <input type="text" ref={inputRef} placeholder="Enter your name" />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

---

useRef와 DOM 접근

useRef로 생성된 객체는 current 프로퍼티를 통해 DOM 요소에 접근 가능

이를 통해 값이나 메서드를 호출 가능

console.log(inputRef.current?.value); // input의 값
inputRef.current?.focus(); // input에 포커스

---

폼 데이터

useRef를 여러 개 사용하여 폼 입력값 가져오기 가능

예제: 다중 입력값 처리

import { useRef } from "react";

export default function App() {
  const idRef = useRef<HTMLInputElement | null>(null); //ref 객체
  const pwRef = useRef<HTMLInputElement | null>(null);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log("ID:", idRef.current?.value);
    console.log("Password:", pwRef.current?.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={idRef} placeholder="아이디 입력" />
      <input type="password" ref={pwRef} placeholder="비밀번호  입력" />
      <button type="submit">로그인</button>
    </form>
  );
}

---

라디오 버튼과 체크박스 처리

라디오 버튼

useRef와 배열을 활용해 선택된 라디오 버튼의 값을 가져옴

라디오 버튼 처리 시 필요한 특별 처리:

• 배열로 참조 관리 (useRef<HTMLInputElement[]>([]))
• 각 라디오 버튼에 ref 콜백 함수로 배열에 요소 할당
• find() 메서드로 선택된 라디오 버튼 탐색

예시 코드:

const radioRef = useRef<HTMLInputElement[]>([]);

// 선택된 라디오 버튼 찾기
const selectedRadio = radioRef.current.find((radio) => radio.checked);
console.log(selectedRadio?.value);

// JSX에서 ref 설정
<input
  type="radio"
  ref={(el) => {
    if (el) radioRef.current[0] = el;
  }}
  name="gender"
  value="female"
  defaultChecked
/>
<input
  type="radio"
  ref={(el) => {
    if (el) radioRef.current[1] = el;
  }}
  name="gender"
  value="male"
/>

---

체크박스

checked 속성으로 체크 여부 확인

const checkboxRef = useRef<HTMLInputElement | null>(null);

console.log("Checked:", checkboxRef.current?.checked);

---

제어 컨트롤러 vs 비제어 컨트롤러

특징	제어 컨트롤러	비제어 컨트롤러
기본 원리	상태(state)로 값 관리	DOM 요소에 직접 접근
실시간 렌더링	✅ 지원	❌ 지원하지 않음
사용 사례	실시간 상태 반영이 필요한 경우	간단한 DOM 접근, 초기화 작업 등

출처: 수코딩