[TIL-127] 위코드 27일차: React JS - useRef() 훅스

useRef는 특정 DOM을 선택할 때 쓰는 건데, useRef()를 어떤 변수에 할당해놓고 그 변수를 선택될 DOM 요소의 ref attribute에 주면 그 변수로 ref 받은 요소를 불러올 수 있다.

import React, { useState, useRef } from 'react';

const pwInput = useRef();
const focusPw = event => {
    if (event.code === ‘Enter’) {
      pwInput.current.focus();
    }
  };

----

<input
    onChange={handledIdInput}
    onKeyUp={focusPw}
    placeholder=“전화번호, 사용자 이름 또는 이메일”
/>
<input
    onChange={handledPwInput}
    type=“password”
    ref={pwInput}
    placeholder=“비밀번호”
/>

 

 

[React] ref통한 input 태그 커서/포커스 조정 (class component와 hooks에서 비교) https://velog.io/@ju_h2/React-ref%ED%86%B5%ED%95%9C-input-%ED%83%9C%EA%B7%B8-%EC%BB%A4%EC%84%9C%ED%8F%AC%EC%BB%A4%EC%8A%A4-%EC%A1%B0%EC%A0%95-class-component%EC%99%80-hooks%EC%97%90%EC%84%9C-%EB%B9%84%EA%B5%90

https://padak-padak.tistory.com/entry/React-useRef%EB%A1%9C-%ED%8A%B9%EC%A0%95-DOM-%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0