[React] useRef - 이론 설명, 활용 예제

이번 글은 useRef에 대한 설명글이다.

---

 

[ useRef ]

DOM 노드를 직접 사용하고 싶을 때 사용하는 리액트 훅

 

 

 

- 버튼 자동 클릭 예제

useRef()를 null로 설정하는 이유

=> 아직 useRef()가 빈 통의 상태이기 때문에 아무 것도 담겨있지 않아 null로 작성

 

const buttonRef = useRef(null);

 

 

버튼 태그 안에 ref 속성 작성

=> 리액트가 해당 button 태그를 빈 통이였던 buttonRef에 넣어줌

=> 그래서 렌더링이 끝나면 buttonRef.current 안에 <button> 태그가 들어있음

return <button ref={buttonRef} onClick={() => alert("Clicked!")}>버튼</button>;

 

 

=> 해석 : <button> 태그가 담긴 buttonRef 통 안에 button DOM을 꺼내서 해당 버튼을 클릭해줘

buttonRef.current.click();

 

=> 아직 렌더링이 되지 않아 ref가 연결이 되지 않았을 때 오류가 나는 것을 방지하기 위해 점검하는 부분

if(buttonRef.current)

 

 

 

- 과정 설명

• useRef() → “DOM을 담을 통 만들기”
• ref={inputRef} → “이 통에 이 DOM을 넣어줘!”
• inputRef.current → “통 안에 담긴 진짜 DOM 꺼내기

 

 

 

🔽useRef 예제🔽

import { useEffect, useRef } from "react";

function App() {
  const buttonRef = useRef(null);

  useEffect(() => {
  if(buttonRef.current) {
    buttonRef.current.click(); // 렌더 후 자동 클릭
    }
  }, []);

  return <button ref={buttonRef} onClick={() => alert("Clicked!")}>버튼</button>;
}

 

 

 

---

 

 

[ useRef로 값 저장하기 ]

useState는 저장한 값이 변경되면 화면을 다시 렌더링하는 특징을 가짐

=> useRef로 값 저장 시 화면을 다시 렌더링 하지 않고 값을 저장함

 

🔽useRef 값 저장 예제🔽

import { useRef } from 'react';

function App() {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log(countRef.current);
  };

  return (
    <button onClick={handleClick}>
      {countRef.current}
    </button>
  );
}

export default App;

 

 

---