반응 후크 – useRef

useRef

DOM 요소에 액세스할 수 있는 React Hook!

예를 들어 화면이 렌더링되자마자 입력 태그 집중 그래야 한다면

사용하는 방법

그리고 당신도 바꿀 수 있습니다!

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

function App() {
  const ref = useRef("초기값");
  console.log("ref", ref);
  
//  function App() {
//  const ref = useRef("초기값");
//  console.log("ref 1", ref);

//  ref.current = "바꾼 값";
//  console.log("ref 1", ref);

  return (
    <div>
      <p>useRef에 대한 이야기에요.</p>
    </div>
  );
}

export default App;

이렇게 설정한 ref 값은 컴포넌트가 계속 렌더링되더라도 언마운트 될 때까지 값을 유지합니다!

이 기능으로 인해 useRef는 다음 두 가지 용도로 사용됩니다.

1. 수납공간

– 상태와 비슷한 역할을 합니다. 그러나 상태가 변경되면 렌더링이 다시 발생합니다. 내부 변수가 초기화됩니다.

– refs에 저장된 값은 렌더링을 일으키지 않습니다. 즉, ref의 값이 변경되더라도 렌더링으로 인해 내부 변수가 초기화되는 것을 방지할 수 있다.

– 컴포넌트 렌더링 100회 → ref에 저장된 값이 유지됩니다.

요컨대

다시 렌더링해야 하는 값을 처리할 때 상태를 사용합니다.

ref는 다시 렌더링하지 않는 값을 저장하는 데 사용됩니다.

2. DOM

– 특정 입력이 렌더링되자마자 포커스가 필요한 경우 useRef를 사용할 수 있습니다.

상태와 참조의 차이점

상태가 변경될 때 렌더링되고 ref가 변경될 때 렌더링되지 않는다는 것을 다시 한 번 기억하십시오!!!

DOM 액세스

태그에는 ref라는 속성이 있습니다. 이렇게 하면 해당 DOM 요소에 액세스할 수 있습니다.

useRef를 사용한 초점 주기

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

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

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, ());

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

export default App;

아이디 10자리 입력 시 자동으로 비밀번호 입력란으로 이동하는 코드

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

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

  const (id, setId) = useState("");

  const onIdChangeHandler = (event) => {
    setId(event.target.value);
  };

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, ());

  // 왜 useEffect 안에 놓았을까요?
  useEffect(() => {
    if (id.length >= 10) {
      pwRef.current.focus();
    }
  }, (id));

  return (
    <>
      <div>
        아이디 :
        <input
          type="text"
          ref={idRef}
          value={id}
          onChange={onIdChangeHandler}
        />
      </div>
      <div>
        비밀번호 : <input type="password" ref={pwRef} />
      </div>
    </>
  );
}

export default App;

암호 유형은 암호입니까? -> 숫자 숨기기

왜 ID.길이 ≥ 10 이 논리를 useEffect 안에 넣었습니까?

~~