[React] Ref로 DOM 다루기 :: useRef

 

🎯 useRef

• JS에는 document.get~/query~를 사용해서 DOM 다룬다.
• React에서는 useRef()hook 함수를 사용한다.
  • 특정 DOM을 가리킬 때 사용하는 Hook 함수.
• 리액트에서 document api를 이용해서 DOM을 다루면 비효율이 나올 수 있다.

 

📝 화면 뜨자마자 input에 포커스 주기

const rootElement = document.getElementById('root');

const App = () => {
    const inputRef = React.useRef();
    const divRef = React.useRef();

    React.useEffect(() => {
        inputRef.current.focus();

        setTimeout(() => {
            divRef.current.style.backgroundColor = "pink";
        }, 1000);
    }, []);

    return (
        <>
            <input ref={inputRef} />
            <div 
                ref={divRef}
                style= {{ height: 100, width: 300, backgroundColor: "brown" }}>
            </div>
        </>
    );
};

ReactDOM.render(<App />, rootElement);

사용법

1. Ref 객체 만들기
   • const inputRef = React.useRef();
2. 접근하고 싶은 태그에 ref 속성을 준다.
   • <input ref={inputRef} />
3. DOM 다루기
   • inputRef.current.focus();
   • current는 우리가 선택하고자 하는 DOM을 가리킨다.

 

🏷 요약

• Vanilla JS -> document.get~/document.query로 접근
• React -> useRef/ref로 접근

 

📌 참고

• Hooks API Reference - React