React - useRef (Dom 다루기)

기존 자바스크립트로 작성하는 법

const App = () => {
  React.useEffect(()=>{
    document.getElementById('input').focus();
  })
  return (
    <>
      <input type="text" id="input" />
    </>
  );
};

React에서 제공하는 useRef를 사용하는 방법

• 대상.current 로 접근 가능하다.

const App = () => {
  const inputRef = React.useRef();
  React.useEffect(()=>{
    inputRef.current.focus();
  })
  return (
    <>
      <div className="App">
        <input type="text" ref={inputRef} />
      </div>
    </>
  );
};

리액트에서는
document api를 이용해 직접 엘리먼트에 접근해 조작하기 보다는
리액트가 관장하고있는 틀 안에서 조작하는 것이 효율적이다.