[React] useRef를 사용하는 이유

 

 

🚀 useRef

useRef는 React에서 저장공간이나 DOM요소에 접근하기 위해 사용되는 Hook이다. JavaScript에서 DOM에 접근하기 위해 사용한 querySelector 등의 함수와 같은 역할이다. Ref는 reference를 뜻한다.

 

useRef를 사용하면 함수형 컴포넌트에서도 이전에 클래스형 컴포넌트에서만 가능했던 DOM 조작이나 값의 유지가 가능하다. 이 Hook은 함수 컴포넌트 내에서 변수를 선언하고, 해당 변수가 컴포넌트의 생명 주기 동안 유지되도록 한다.

 

useRef 의 첫 번째 매개변수인 initialValue는 ref 객체의 current 프로퍼티의 초기값으로 사용된다. initialValue에는 모든 타입으로 지정가능하다. 초기값이 설정되면 해당 ref 객체의 current 프로퍼티는 해당 값으로 초기화된다. 이 매개변수는 초기 렌더링 이후에는 무시된다.

 

useRef를 호출하면 React에서 사용하는 단일 프로퍼티를 가진 ref 객체가 반환된다.

🚀 useRef 사용하는 이유

1️⃣ DOM 조작

useRef를 사용하면 React 컴포넌트에서 DOM 요소 접근과 조작이 쉬워진다. 특정 DOM 요소의 크기나 위치를 변경, 포커스 설정 등의 작업이 가능하다.

 

2️⃣ 컴포넌트 간 데이터 공유

useRef로 생성된 객체는 컴포넌트 리렌더링 간에 유지되기 때문에 컴포넌트 간에 데이터 공유가 가능하다.

 

3️⃣ 컴포넌트 내부 변수 저장

useRef를 사용하여 컴포넌트의 렌더링과 상태 변화에 영향을 주지 않고, 컴포넌트 내부에서 변수를 저장하고 유지할 수 있다. 정보를 기억하고 싶은데 새로 렌더링 되길 바라지 않을 때 사용한다. ref는 컴포넌트의 시각적 출력에 영향을 미치지 않는 정보를 저장하는 데 적합하다.

 

4️⃣ 이전 값 저장

useRef를 사용하여 이전 상태나 props 값을 저장할 수 있다. 이전 값과 현재 값의 비교 가능)

 

🚀 code

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

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

 

useRef를 사용하여 inputRef라는 변수를 생성하고, 해당 변수를 input 요소의 ref 속성에 전달하여 DOM 요소에 접근한다. useEffect 훅을 사용하여 컴포넌트가 DOM에 삽입될 때 input 요소에 포커스를 설정하는 코드이다.