[React] 리액트 훅 - useRef(리렌더링 방지 DOM요소 접근)

📌 useRef 훅

이전 값과 새로운 값을 연결하고, 렌더링과는 무관하게 값이 유지되어야 할 때 사용됩니다.

주로 DOM 요소나 외부 라이브러리의 인스턴스와 같이 렌더링과는

직접적으로 관련이 없는 값들을 저장할 때 사용됩니다.

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다.

반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다.

• 👉 성능향상
  변화는 감지하지만 렌더링 발생 ❌ 
• 👉 DOM요소에 손쉽게 접근 (ref속성 사용)
• 👉 전생애주기를 통해 값 유지
  언마운트 되기전까지는 값을 계속 기억함

// ▶ 객체 생성
// → {current: 초기값} 을 지닌 객체가 반환됨 
const 변수명 = useRef(초기값)

// ▶ DOM 설정을 통해 DOM에 직접 접근
<input ref={변수명}/>

// ▶ DOM API 사용
변수명.current.focus();

---

📌 useRef 사용

• DOM 조작
  useRef를 통해 DOM 요소를 직접 조작
  
  
• 컴포넌트 인스턴스 저장
  자식 컴포넌트의 메소드나 인스턴스에 접근
  
  
• 이전 상태값 저장
  이전 상태값을 저장하고 비교하여 변경 사항을 추적
  
  
• 순수 함수에서 값 저장
  함수 내에서 상태를 유지하며 값을 조작

---

✅ DOM 요소 접근

useRef는 React의 가상 DOM과 실제 DOM을 연결해주는 방법을 제공합니다.

주로 DOM 요소에 직접 접근하고 조작할 때 사용합니다.

 

🔎 입력 필드에 포커스 주기

inputRef 를 통해 input 요소에 접근하고, 버튼을 클릭하면 input에 포커스를 줄 수 있습니다.

import { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);  // inputRef 변수를 선언하고 초기값을 null로 설정

  function handleClick() {
    inputRef.current.focus();  // input 요소에 포커스를 줍니다.
  }

  return (
    <div>
      <input type="text" ref={inputRef} />  {/* input 요소에 ref 속성으로 연결 */}
      <button onClick={handleClick}>Focus Input</button>  {/* 버튼 클릭 시 포커스 */}
    </div>
  );
}

---

✅ 컴포넌트 인스턴스 접근

useRef를 사용하여 자식 컴포넌트의 메소드나 인스턴스에 접근할 수 있습니다.

 

🔎 자식 컴포넌트 메소드 호출

componentRef 를 통해 자식 컴포넌트의 메소드에 접근하고 호출할 수 있습니다.

React.forwardRef 는 자식 컴포넌트가 부모 컴포넌트로부터 전달된 ref를 받아서,

자식 컴포넌트의 DOM 요소나 자식 컴포넌트의 인스턴스에 직접 접근할 수 있게 해줍니다.

import { useRef } from 'react';

// ▶ 자식 컴포넌트
function Component(props, ref) {
  const doSomething = () => {
    console.log('Doing something!');
  };

  // ● ref를 자식 컴포넌트에 전달
  React.forwardRef((props, ref) => (
    <div ref={ref}>Component</div>
  ));
}

// ▶ 부모 컴포넌트
function Example() {
  const componentRef = useRef(null);		// 자식 컴포넌트를 참조할 ref 생성

  function handleClick() {
    if (componentRef.current) {
      componentRef.current.doSomething();	// 자식 컴포넌트의 메소드 호출
    }
  }

  return (
    <div>
      <Component ref={componentRef} />				{/* 자식 컴포넌트에 ref 할당 */}
      <button onClick={handleClick}>Do Something</button>	{/* 버튼 클릭 시 메소드 호출 */}
    </div>
  );
}

---

✅ 이전 상태값 저장

useRef를 사용하여 컴포넌트의 이전 상태값을 저장하고, 현재 상태값과 비교할 수 있습니다.

 

🔎 이전 상태값 비교

prevValueRef 를 사용하여 이전 상태값을 저장하고, 상태가 변경될 때마다 비교할 수 있습니다.

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

function Example() {
  const [value, setValue] = useState('');
  const prevValueRef = useRef('');		// 이전 값 저장용 ref

  useEffect(() => {
    if (prevValueRef.current !== value) {
      console.log('Value has changed!');	// 값이 변경된 경우에만 로그 출력
      prevValueRef.current = value;		// 현재 값을 ref에 저장
    }
  }, [value]); // value가 변경될 때마다 실행

  function handleChange(event) {
    setValue(event.target.value);		// 입력값 상태 업데이트
  }

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
}

---

✅ 순수 함수에서의 값 저장

useRef를 사용하여 함수 내에서 상태를 유지할 수 있습니다.

 

🔎 순수 함수 내에서 값 유지

valueRef 를 사용하여 pureFunction 내에서 값 상태를 유지하고 변경할 수 있습니다.

import { useRef } from 'react';

function pureFunction(initialValue) {
  const valueRef = useRef(initialValue);	// ref로 값을 저장

  function increment() {
    valueRef.current++;				// ref의 값을 증가
  }

  return { value: valueRef.current, increment }; // 현재 값과 증가 함수 반환
}

const result = pureFunction(0);
console.log(result.value);	// 0
result.increment();		// 값 증가
console.log(result.value);	// 1

 

 

🔎 문자열 데이터 : 문자열에 텍스트를 추가

import { useRef } from 'react';

function pureFunction(initialValue) {
  const valueRef = useRef(initialValue);	// ref로 값을 저장

  function appendText(newText) {
    valueRef.current += newText;		// 문자열을 추가
  }

  return { value: valueRef.current, appendText };
}

// 사용 예시
const result = pureFunction('Hello');
console.log(result.value);	// "Hello"
result.appendText(' World');
console.log(result.value);	// "Hello World"

 

 

🔎 배열 데이터: 배열에 아이템을 추가

import { useRef } from 'react';

function pureFunction(initialArray) {
  const valueRef = useRef(initialArray);	// ref로 값을 저장

  function addItem(item) {
    valueRef.current.push(item);		// 배열에 아이템 추가
  }

  return { value: [...valueRef.current], addItem }; // 배열을 복사해서 반환
}

// 사용 예시
const result = pureFunction(['apple', 'banana']);
console.log(result.value);	// ["apple", "banana"]
result.addItem('cherry');
console.log(result.value);	// ["apple", "banana", "cherry"]

 

---