React Hook 03 - useRef()

HTML에서 변화는 감지하지만, 그 변화가 렌더링을 발생시키지 않을때 사용 

 

1. 변수저장으로 사용된다

const ref = useRef(value) 이런식으로 선언하면
인자로 넣어준 value는
{current: value}로 저장이 된다.

그래서 이 객체의 값은 ref.current= value로 언제든 수정가능

state는 html에서 자꾸 변경되는 값에 쓰기 좋은데
ref는 렌더링이 안되기 때문에 변수들의 값을 유지할때 많이 쓴다.
**state에서 렌더링을 다시해도 ref의 값은 유지가 된다.

만약 내가 보여주지는않지만 상태가 바뀔때마다 상태를 저장하고싶은게 있는데, 

그걸 일반변수로 해버리면, 일반변수는 처음 초기값으로 돌아간다.

하지만 ref의 값은 안돌아간다.

 

import { useRef, useState } from "react";

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

  // 화면이 계속해서 rendering 되기 때문에 count 누를때마다 불린다.
  console.log("rendered");

  // 화면이 계속해서 rendering 되기 때문에 버튼이 눌릴때마다 숫자가 올라간다
  const IncrementState = () =>{
    setCount(count + 1);
  }

  // 화면이 계속해서 rendering 되지만 ref는 재rendering되지 않아서 숫자가 올라가지 않는다
  const IncrementRef = () =>{
    countRef.current = countRef.current + 1;
    // 하지만 value는 올라간다.
    console.log(countRef.current);
    // 즉 정리하자면, 화면에만 안보이지, 내부에 저장된 값은 변한다, 그러고 새로고침해서 화면이 아예 재 렌더링되면 화면에서 표시된다.
  }

  // 일반 변수로 선언하는거랑, ref로 선언하는거랑 차이
  // 일반 변수로 선언을 하면 레더링 될때마다 다시 처음에 준 값으로 돌아간다.
  let countVar = 0; 

  return (
    <div className="App">
      <p>State: {count} </p>
      <p>Ref: {countRef.current}</p>
      <button onClick={IncrementState}>IncrementState</button>
      <button onClick={IncrementRef}>IncrementRef</button>
    </div>
  );
}

export default App;

 

2. dom요소에 접근 가능

자바스크립트의 dom기능에 접근하듯이 접근이 가능하다.

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

const App = () => {
  // submit 기본 제어 
  const onSubmit = (event) => {
    event.preventDefault();
    console.log("Submitted")
  }

  // 선언 useRef
  const inputRef = useRef();
  
  // 이게 쓰이는곳에는 맵이 로딩될때 한번만 focus 를 해준다
  useEffect(()=>{
    inputRef.current.focus();
  })

  return (
    <div className="App">
      <form action="/" onSubmit={onSubmit}>
        // 사용할땐 이렇게
        <input ref={inputRef} type="text" placeholder="username"/>
        <input type="submit" value="Log In"/>
      </form>

    </div>
  );
}

export default App;