[React] React Hooks - useRef

💻 들어가며

로그인 컴포넌트에서 로그인, 비밀번호 오류같은 특정 상황에서

잘못된 input값이 들어있는 요소에 focus를 주는 기능을 구현하고싶어서

useRef를 공부하면서 정리한 내용입니다.

---

📚useRef

📗 개념

리액트에서 특정 엘리먼트의 크기를 가져온다던가, 스크롤바 위치를 가져온다던가,
포커스를 설정해야할 때와 같은 상황에서 특정 DOM을 직접 선택하기 위해 사용하는 Hook 입니다.

출처 : 벨로퍼트와 함께하는 모던 리액트 - 10. useRef로 특정 DOM 선택하기

---

📗 예제

1. useRef에 대한 설정 없는 예제코드

// no ref
return (
    <form onSubmit={onSubmitForm}>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <button>입력!</button>
    </form>
  );

버튼 클릭 전

버튼 클릭 후

 ➡️ ref 설정 없기때문에 입력 버튼을 둘러도 별다른 변화 없음

---

2. useRef 사용, 버튼 클릭시 input focus 설정 예제코드

const onSubmitForm = (e: React.FormEvent) => {
    e.preventDefault();
    const input = inputEl.current;
    setValue('');
    input?.focus();
  };
  
  return (
    <form onSubmit={onSubmitForm}>
      <input
        ref={inputEl}
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <button>버튼</button>
    </form>
  );

버튼 클릭전

버튼 클릭후 focus

➡️ 버튼 클릭 후 input 값에 포커스되어 바로 입력 가능

---

👊 TODO

1. 로그인 input에 ref 적용

 

기존 수풀 프로젝트에서 만들었던 로그인 컴포넌트를

로컬로만 구현해봐서 쿠키, 세션을 학습하면서 리팩토링을 해볼 계획인데

로그인 실패 응답이 올 경우  사용자가 쉽게 재입력할 수 있도록 input에 focus 되게

useRef를 이용해서 구현할 예정