react - useRef 사용하기

📌useRef?

const ref = useRef(value)

 

useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다. 우리가 자바스크립트를 사용 할 때에는, 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용한다.

React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요하다. 그럴때 우리는 useRef라는 React Hook을 사용한다.

 

함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환한다. ※ref오브젝트 { current : value }

ref 오브젝트는 언제든 수정할 수 있다. 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 된다.

컴포넌트가 언마운트 되기 전까지는 유지할 수 있다는 의미이다.  

 

1. useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
2. useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 "상자"와 같습니다.
3. 그리고 .current 프로퍼티를 변경하더라도 이 것이 리렌더링을 발생시키진 않습니다.

 

 useRef를 통해 만든 ref 객체 내부의 값은, render와 상관 없이 유지 된다. 

 

 

📌useRef는 언제 사용될까?

1. state와 비슷하게 어떤 값을 저장해주는 저장공간으로 사용된다. 

 

State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화 : 원하지 않는 렌더링 때문에 곤란해지는 경우 발생 

Ref의 변화 -> 렌더링 X -> 변수들의 값이 유지됨

State의 변화 -> 렌더링 -> Ref의 값이 초기값으로 되는 것이 아니라 변화된 값으로 유지됨. 

 

useRef는 변화는 감지해야하지만 그 변화가 렌더링을 발생시키면 안되는 값을 다룰  때 사용된다. 

// App Component
function App() {
  const [count,setCount] = useState(0);
  const renderCount = useRef(0);

  useEffect(() => {
        renderCount.current = renderCount.current + 1;
        console.log("렌더링된 수:" ,  renderCount.current )
  })
  return (
    <div>
      <p>count: {count}</p>
      <button onClick={() => {setCount(count+1)}}>올려!!</button>
    </div>
  );
}

 

useEffect 안에 useState함수를 썼다면 무한 굴레에 빠지는 현상이 나타났을 것이다.

하지만 useRef를 사용함으로써 state값을 count시킨 수만큼 렌더링된 숫자를 반환할 수 있게 되었다. 

 

 

2. Ref를 통해 DOM요소에 접근해서 여러가지 작업을 할 수 있다. 

 

예) input요소를 click하지 않아도 focus를 주고 싶을 때 

function App() {
  const inputRef = useRef();

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

  const login = () => {
    alert(`환영합니다. ${inputRef.current.value}`)
    inputRef.current.focus();
  }


  return (
    <div className="wrap">
      <input ref={inputRef} type="text" placeholder="username"></input>
      <button onClick={login}>로그인</button>
    </div>
  );
}

 

 

 

 

 

 

참고문서

• https://youtu.be/VxqZrL4FLz8?si=3l8ncQ0oy32hSVBh
•  https://ko.reactjs.org/docs/hooks-reference.html#useref
• https://velog.io/@juno7803/React-useRef-200-활용하기