how to use useref in react

by

useRef를 사용하는 방법

useRef는 React의 Hook 중 하나로, JSX에 있는 요소들에 직접 접근하거나, 값이 변경될 때 이전 값을 유지할 수 있는 기능을 제공합니다. 이 글에서는 useRef를 사용하는 방법에 대해 알아보겠습니다.

useRef란?

useRef는 React의 함수형 컴포넌트에서 가변적인 값을 유지할 수 있는 객체입니다. 일반적으로 ref라고 부르는데, 주로 DOM 노드나 컴포넌트 인스턴스에 대한 참조를 유지하는 데 사용됩니다. useRef는 매번 렌더링 될 때마다 변경되지 않는 값을 저장할 수 있기 때문에, 렌더링 사이클 동안 값이 바뀌어도 화면에서 바로 반영되지 않습니다.

useRef 사용법

useRef를 사용하는 기본적인 방법은 다음과 같습니다.

“`jsx
import React, { useRef } from “react”;

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

// 값에 접근하려면 inputRef.current를 사용합니다.
function handleClick() {
inputRef.current.focus();
}

return (


);
}
“`

위의 코드에서 useRef를 사용하여 inputRef라는 변수를 선언했습니다. <input> 요소의 ref 속성에 inputRef를 지정함으로써 DOM 노드에 대한 참조를 유지할 수 있습니다. handleClick 함수에서는 inputRef.current를 사용하여 <input> 요소에 접근하고, focus() 메소드를 호출하여 포커스를 설정합니다.

useRef로 이전 값을 유지하기

useRef를 사용하면 컴포넌트의 렌더링 사이클 동안 값을 유지할 수 있습니다. 이를 통해 이전 값과 현재 값의 비교를 할 수 있습니다. 예를 들어, 사용자가 폼을 제출하고 입력 필드를 초기화하는 경우 다음과 같이 useRef를 사용할 수 있습니다.

“`jsx
import React, { useState, useRef } from “react”;

function MyComponent() {
const [value, setValue] = useState(“”);
const previousValue = useRef(“”);

function handleChange(event) {
setValue(event.target.value);
}

function handleSubmit(event) {
event.preventDefault();

if (value !== previousValue.current) {
  // 값이 변경되었을 때의 로직 실행
  console.log("값이 변경되었습니다:", value);
}

previousValue.current = value;
setValue("");

}

return (



);
}
“`

위의 코드에서 previousValue라는 useRef 변수를 사용하여 이전 값을 저장합니다. handleSubmit 함수에서는 value와 previousValue.current를 비교하여 값이 변경되었는지 체크한 뒤, 변경되었다면 로직을 실행합니다. 이후 previousValue.current에 현재 값인 value를 대입하고, value를 초기화합니다.

요약

이 글에서는 useRef를 사용하는 방법에 대해 알아보았습니다. useRef를 사용하여 JSX에 있는 요소에 직접 접근하거나, 이전 값과 현재 값을 비교할 수 있습니다. 이외에도 useRef는 다양한 상황에 유용하게 사용될 수 있으니, 필요한 경우에 적절하게 활용해보시기 바랍니다.