[React] 리액트 훅( useRef )

 

 

https://hyunu0504.github.io/blog11/

React App

 

 

 

 

 

useState는 값이 변경될때마다 재랜더링이 일어난다.

 

useRef는 값이 변경되더라도 useState와 다르게 재랜더링이 일어나지 않을 뿐

 

다른 useState때문에 재랜더링이되더라도 useRef는 변경된 값을 유지한다.

 

그러면 var/let/const와 동일하다고 생각하겠지만 

 

재랜더링이 된다면 컴포넌트안에 있는 함수가 재 실행된다.

 

그러면 컴포넌으에 있는 var/let/const 변수들은 초기값으로 다시 설정되기 때문에

 

재랜더링을 해도 변경된 값을 가지고있지 못한다.

 

즉 useRef는 값이 변경되는것을 유지해야하고 재랜더링은 필요없을때 사용한다.

 

 

 

 

 

 

 

useRef 사용법

 

 

useRef를 import한다.

 

 

 

 

 

 

 

 

useRef안의 값은 초기값이다.

 

 

 

 

 

 

 

 

콘솔창에 useRef로 만든 변수를 출력해보면

 

오브젝트로 이루어진 current의 key값  그리고

 

아까 앞전에 useRef안에 작성한 초기값이 value값으로 들어온다.

 

useRef변수명.current 하면 useRef안의 값을 출력할 수 있다.

 

 

 

 

 

useRef를 사용하면 DOM을 조작할 수 있다.

 

<input ref={login} >  </input>\
<div ref={login}>  </div>

 

ref에 useRef로 만든 변수를 대입하면된다.

 

useRef변수명.current.focus() 를 useEffect로 첫 마운트될때만 하면 

 

홈페이지가 처음 랜더링될때  아이디창에 focus를 줄 수 있다.

 

 

 

 

 

 

 

 

 

위는 input태그에 focus가 되고

 

useState버튼을 클릭하면 useState값을 +1

 

useRef버튼을 클릭하면 useRef값을 +1 하는 기능이다

 

 

 

 

 

useState는 값이 변경되면 재랜더링이 되기 때문에

 

useState값이 바로 변경되는 것을 확인할 수 있다.

 

useRef는 값이 변경돼도 재랜더링이 되지는 않고 값만 변경되기 때문에

 

useRef버튼을 눌렀을때는 변화가 없고 재런더링이 되는 버튼인 useState버튼을 클릭하면

 

useRef 값도 변경되는것을 확인 할 수 있다.

 

input태그에 ref값으로 useRef변수 값을 주면 

 

useRef변수.current.focus()를 하면 DOM을 조작할 수 있다. 

 

그것을  useEffect에 빈배열을 대입해서

 

처음에 웹사이트가 랜더링될때만 실행하도록 했다.

 

버튼 클릭시 focus가 해제되기 때문에

 

버튼에도 useRef변수.current.focus()를 대입했다.

input안의 값을 가져올때 onChange의 콜백함수에 인자를 하나받고

 

인자.target.value하면 input안의 값을 가져올 수 있는데.

 

useRef를 이용해서 input안의 값을 가져오는 방법은

 

useRef변수.current.value이다

 

 

 

 

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

function App() {
  const loginBtn = () => {
    alert(`안녕하세요 ${login.current.value} 님`);
    login.current.focus();
  };
  const [count, setCount] = useState(0);
  const nums = useRef(0);
  const login = useRef();
  useEffect(() => {
    login.current.focus();
  }, []);
  return (
    <div className="App">
      <div>useState : {count}</div>
      <div>useRef : {nums.current}</div>
      <button onClick={() => setCount(count + 1)}>useState버튼</button>
      <button onClick={() => (nums.current += 1)}>useRef버튼</button>
      <p />
      <form>
        <input ref={login} type="text" placeholder="사용자명"></input>
        <button onClick={loginBtn}>Login</button>
      </form>
    </div>
  );
}

export default App;