React { useRef }

useRef 

밑에는 요소의 아이디를 강제해서 해당 요소가 랜더딩되면 focus가 되게 하게 끔 만들었다. 이걸를 useRef를 사용하면 

    const rootElement = document.getElementById('root');
    
    const App = () => {
      React.useEffect(() => {
        document.getElementById("input").focus()
      },[]);

      return(
      <>
        <input id="input" />
      </>
    );
  };

  ReactDOM.render(<App />, document.getElementById("root"));

밑에 같은 코드로 바뀐다.  useRef()로 만들어진 무언가를 inputRef라는 변수에 넣어주고,  원하는 요소에 ref라는 속성에 변수를 넣어주고, useEffect에 Input.current.focus()를 넣어준다. 하지만 왜 이렇게 까지 하는 것일까 ? 

    const rootElement = document.getElementById('root');
    
    const App = () => {
      const inputRef = React.useRef();
      React.useEffect(() => {
        inputRef.current.focus();
      },[]);

      return(
      <>
        <input ref={inputRef} />
      </>
    );
  };

  ReactDOM.render(<App />, document.getElementById("root"));

 

Ref로 DOM을 다루는 이유는  사용자가 직접 DOM으로 요소를 접근하는 것보다 React 스스로 관장하는 그 틀에서 요소로 접근하는게 더 효율적이기 때문입니다. useRef로 특정 혹은 생성된 값은 옆에 .current를 붙여서 접근할 수 있다.