[React_기초] ref, useRef

HTML에서 input에 포커스 주거나 스크롤 박스 조작하거나 Canvas 요소에 그림을 그리는 등 특정 DOM에 직접적으로 건드려야 할 때는 id를 사용하여 DOM에 이름을 달지만,
React는 ref (reference)를 이용해서 이름을 달 수 있다.

ref 사용 1 : 콜백함수를 통한 ref 설정

ref를 만드는 가장 기본적인 방법은
콜백함수 ()=>{} 를 사용하여 달고자 하는 요소에 ref라는 콜백함수를 props로 전달해주는 것이다.

ex)

<input ref={(ref)=>{this.input=ref}}/>

ref 사용 2 : useRef 통한 ref 설정

useRef는 함수형 컴포넌트 코드로 리액트 훅(useState, use~, ...)에서 많이 이용하는 코드이다.
ref에 현재 접근한 DOM의 value값을 가져오기 위해서는 inputRef.current.value를 써서 값을 가져오면 된다.

ex)

  // useRef 활용 X
  const handleClick = () =>{
    let input = document.querySelector('input[type="text"]')
    console.log('그냥 가져오기: ',input.value);
  }
  // useRef 활용 O
  let inputRef = useRef("")
  const handleClick2 = () =>{
    console.log(inputRef);                  // ref 객체 내 구조
    console.log(inputRef.current);          // input
    console.log('ref로 input값 가져오기:',inputRef.current.value);    // input요소의 값
  }
  return (
    <div>
    	{/* useRef 활용 X */}
        <form>
            <input type='text'/>
            <input type='button' onClick={handleClick} value='클릭'/>
        </form>
		{/* useRef 활용 O */}
        <form>
            <input type='text' ref={inputRef}/>
            <input type='button' onClick={handleClick2} value='클릭'/>
        </form>
    </div>
  )