20221001 React Hooks - useRef 변수관리, DOM 요소 접근

Hook의 규칙

• React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함)
• 구성 요소의 최상위에서만 호출할 수 있음
• 조건문, 반복문 안에서 못 씀

useRef

• 렌더링 간에 값을 유지
• 업데이트 시 다시 렌더링되지 않는 변경 가능한 값을 저장하는 데 사용
• DOM 요소에 직접 액세스하는 데 사용

//생성하고 DOM 노드에 연결하기
const ref = useRef();

// ...

return <div ref={ref}>레프레프</div>;




//DOM 노드 참조하기
const node = ref.current;
if (node) {
  // node를 사용하는 코드
}

 

변화는 감지해야 되지만, 그 변화가 렌더링을 발생시키면 안되는 값을 다룰 때 편리

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 

DOM 요소에 직접 접근 가능

ex)  <input ret={ref}/> input 요소에 포커스

Document.querySelector() 랑 비슷

import { useRef } from "react";
import ReactDOM from "react-dom/client";

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

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 

 

 

 

 

참고 및 출저

https://ko.reactjs.org/docs/hooks-reference.html#useref

Hooks API Reference – React

https://www.w3schools.com/react/react_useref.asp

React useRef Hook