React Hook 정리 - useRef

함수형 컴퍼넌트에서 useRef를 사용하면 ref 오브젝트를 반환한다.

const ref = useRef(value);
// ref : { current : value }

반환된 ref는 컴퍼넌트 전 생애주기를 통해 유지가 된다. 👉🏻 계속 렌더링 되어도 unmount가 되지 않는 이상 계속 유지가 된다.

 

📌사용 목적

1. 값을 저장해 두는 저장공간으로 사용 : useState와 달리 렌더링을 원하지 않을 때 사용한다.

 

2. DOM 요소에 접근할 때 사용

DOM요소에 접근하는 방법

// 렌더링 후 input 박스로 자동으로 focus 되게 처리
import React, { useRef, useEffect } from 'react';

const App = () => {
    const inputRef = useRef();
    useEffect(() => {
        inputRef.current.focus();
    }, []);
    
    return(
    	<div>
    	    	<input type="text" placeholder="입력하세요" ref={inputRef} />
        </div>
    );
};

export default App;