[React] useRef 사용하기

이게 왜 필요해?

=> DOM 요소에 접근해야 할 일이 많아

useRef 사용하여 DOM요소에 접근하기!
그 중에서도 자주 쓰인다는 focus() 연습해보자

1. useRef 임포트

import React, { useEffect, useRef } from "react";

2. useRef 사용하여 변수 선언

  const inputRef = useRef(); // {current:undefiend}

3. useEffect 사용해서 처음 랜더링될때만, inputRef.current에 .focus() 메소드 주기

  useEffect(() => {
    inputRef.current.focus(); // {current:input}
  }, []);

4. return 안에 실제 적용될 DOM요소인 input 의 ref={useRef변수이름} 속성을 추가함

<input placeholder="어디부터될까" ref={inputRef} type="text" />

전체코드 및 연습

• 코드를 보면 세개의 input중에서 ref속성이 있는 세번째 input에 focus효과가 적용된 것을 볼 수 있다!

• 그 외에 추가로 연습할 수 있는 것
  버튼을 눌렀을때 alert 뜨게 한다거나
  alert창 끄고 나서 다시 input에 focus 효과를 준다거나!

  const login = () => {
    alert(`나는 ${inputRef.current.value} 지롱`);
    inputRef.current.focus();
  };   

<button onClick={login}>로그인</button>