(React) useRef

useref 함수
useRef 로 특정 DOM 선택하기
JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.

리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있겠죠.
그럴 땐, 리액트에서 ref 라는 것을 사용합니다.

함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용합니다.

연습1: 초기화버튼 클릭스 포커스를 주기

function Accordian() {
  const [text, setText] = useState('');
  const nameInput = useRef();

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText('');
    nameInput.current.focus();
  };

  return (
    <Long>
      <input name="name" onChange={onChange} value={text} ref={nameInput} />
      <button onClick={onReset}>초기화</button>

      <b>내용:</b>
      {text}
    </Long>
  );
}
const Long = styled.div`
  margin-top: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

1)const nameInput = useRef(); - Ref객체를 만들어준다.
2)
-선택하고 싶은 dom에 속성 ref값을 설정해준다
3) nameInput.current.focus(); Ref객체의 current값은 선택하는 dom을가리고 포커싱해줌

useRef는 돔선택외에도 컴포넌트안에서 조회및 수정가능한 변수를 관리하는용도도있다