[React] Hooks(2) : useRef, input 검색창 포커스

 

 

💡 useRef : DOM 요소에 접근할 수 있도록 하는 훅

state 와 비슷하게 저장한다는 느낌.

 

state : 리렌더링이 꼭 필요한 값을 다룰 때 사용, 렌더링이 일어나면 내부 변수들 초기화

(버튼이 눌리면 숫자가 올라가야할 때!)

 

ref : 리렌더링을 발생시키지 않는 값을 저장할 때 사용, 내부 변수  초기화 XXX

import { useRef, useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  const style = { border: "1px solid black", margin: "10px", padding: "10px" };

  const plusStateCount = () => {
    setCount((prev) => prev + 1); {/*버튼이 눌리면 1 증가*/}
  };
  const plusRefCount = () => {
    countRef.current++; {/*버튼이 눌리면 1 증가*/}
    console.log(countRef.current); {/*화면에선 증가하지 않지만 실제로 증가 중인 거 확인용*/}
  };

  return (
    <>
      <div style={style}>
        STATE {count} <br />
        <button onClick={plusStateCount}>up</button>
      </div>
      <div style={style}>
        REF {countRef.current} <br />
        <button onClick={plusRefCount}>up</button>
      </div>
    </>
  );
}

export default App;

ref 는 버튼을 눌러도(값이 바뀌어도) 렌더링이 일어나지 않는다.

 

💡 화면이 켜졌을 때 input 에 바로 포커스가 되도록 해보자

import "./App.css";
import { useRef, useEffect } from "react";

function App() {
  const idRef = useRef(""); {/*idRef 저장*/}

  useEffect(() => {
    idRef.current.focus(); {/*useEffect 가 실행될 때 idRef.current 에 포커스*/}
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} /> {/*input 에 idRef 연결*/}
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;

 

💡 아이디에 10글자가 입력되면 비밀번호에 포커스 되도록 해보자

import "./App.css";
import { useRef, useState, useEffect } from "react";

function App() {
  const idRef = useRef("");
  const pwRef = useRef("");

  const [id, setId] = useState(""); {/*1. id 의 스테이트를 만든다.*/}

  useEffect(() => {
    idRef.current.focus();
  }, []);

  useEffect(() => {
    if (id.length >= 10) pwRef.current.focus(); {/*4. id 길이가 10이 되면 pw에 포커스*/}
  }, [id]); {/*3. id 가 바뀔 때마다 useEffect 실행*/}

  return (
    <>
      <div>
        아이디 : 
        <input
          type="text"
          value={id}
          onChange={(event) => {
            setId(event.target.value); {/*2. 값이 입력될 때마다 setId*/}
          }}
          ref={idRef}
        />
      </div>
      <div>
        비밀번호 : <input type="password" ref={pwRef} />
      </div>
    </>
  );
}

export default App;