[React] useRef

01 useRef

• 참조변수를 생성!
• 참조변수가 참조하고 있는 요소에 직접적으로 접근 할 수 있음.
• 참조변수 생성 후 가상 DOM 요소의 ref 속성에 대입해주면 가리키는 상태가 됨.

 

 

 

 

 

02 useRef 예제

 

src

 

src/components

• src/components/Boy.js

import React, { useEffect, useRef } from 'react'

function Boy(){

    const refvar = useRef(); // 참조변수 생성!

    useEffect(() => {
        console.log(refvar.current) // 언제든지 대상 바꿀 수 있음
    }, [])

    return<>
        <input ref={refvar} id="aa" />
        <input id="bb" />
    </>
}

export default Boy

 

src

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './components/App';
import Boy from './components/Boy';

ReactDOM.render(
  <React.StrictMode>
    <Boy />
  </React.StrictMode>,
  document.getElementById('root')
);