useRef는 리액트에서 DOM 요소나 컴포넌트의 상태를 직접적으로 접근할 수 있게 해주는 기능이다, 리액트에서는 일반적으로 상태(state)를 사용해 화면을 업데이트하지만, 때로는 직접적으로 DOM 요소에 접근해야 할 때가 있다. 이런 경우 useRef를 사용한다
useRef를 쉽게 설명하자면:
값을 기억한다: useRef는 상태처럼 값을 기억하지만, 상태처럼 렌더링을 다시 하지 않는다.
DOM 접근: DOM 요소를 직접적으로 제어할 수 있게 도와준다. 예를 들어, 특정 입력 필드에 포커스를 주거나 스크롤 위치를 제어할 때 사용된다.
변경해도 리렌더링되지 않음: userRef를 사용해 값을 변경해도 컴포넌트가 다시 렌더링되지 않습니다. 그래서 성능에 영향을 덜 준다.
import { useRef, useEffect } from 'react';
function MyComponent() {
const inputRef = useRef(null); // ref를 생성합니다.
useEffect(() => {
inputRef.current.focus(); // 컴포넌트가 렌더링된 후, input 요소에 포커스를 줍니다.
}, []);
return <input ref={inputRef} />; // input 요소에 ref를 연결합니다.
}이 코드에서는 inputRef가 input 요소를 참조하고 있으며, 컴포넌트가 화면에 렌더링되면 useEffect 안에서 inputRef.current.focus()로 입력 창에 자동으로 포커스를 줄 수 있다.
이렇게 DOM 요소를 직접 제어하고 싶을 때 userRef를 사용하는 것이다.
굿