useRef

스터디할때 나왔던 주제다!!

리액트로 돔을 쓰는 방법

이라고 대략 이야기 했던 것 같은데,

DOM노드, 엘리먼트, React 컴포넌트 주소값을 참조할 수 있다고 한다.
리액트에서 돔을 건드는 것은 지양해야 하지만 예외적인 상황에서 사용해야 할 때가 있다.

ref란?

state처럼 저장공간으로 사용하는데, 렌더링이 되면 컴포넌트 내부 변수들이 초기화되는 state와 달리 ref는 렌더링되지 않아 변수들의 값이 유지된다. 변경시 렌더링되지 않아야할때, 값이 유지되어야할때 ref를 쓴다.
DOM 요소에 접근할때 사용하기도 하는데, input 요소에 focus를 줄 때 많이 사용한다. Document.querySelector() 같은 느낌이다!

useRef 사용해야 하는 때?

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

스터디때 공부한 내용과 함께 이해를 해보자면

화면에 창을 뜨게 해서 사용자에게 무언가 알려주려 한다. 이때 alert을 쓰는 것은 구식이다. 경계선을 두껍게 주는 focus를 주는 것이 좋다.
이때 어떤 DOM 엘리먼트에 focus 줘야하는지 자바스크립트에게 알려줘야하니 useRef를 사용한다.

const 아무돔 = useRef() //{current: undefined}

해주고 아무돔을 살펴보면 MultableRefObje라고 뜬다. Html DOM 요소에 접근할 수 있는 기능이라는 뜻임!
useRef는 객체이다. current라는 키를 갖고있다.

리액트 ref doc

https://ko.reactjs.org/docs/refs-and-the-dom.html

// 1. useRef import해준다.
import React, { useRef, useEffect } from "react";
  const inputRef = useRef();
  useEffect(()=>{
    inputRef.current.focus();
  }, [])

  return (
    <div>
      <label>Username </label>
      //3. useRef 담은 변수를 ref에 할당하면 dom을 담는다.
      <input ref={inputRef} type="text" placeholder="username" />
      <button>로그인</button>
    </div>
  );
};