React : useRef()

useRef() hook 에 대해 알아보자

const ref = useRef(값);
// 반환값 {current: 값}

useRef() 함수는 파라미터로 들어가는 값을 가지고 { current: "값" } 이러한 형태의 객체를 반환한다.

ref 객체는 수정이 가능하다. 언제든 원하는 값으로 수정할 수 있다.

const ref = useRef("hello") // { current: "hello" }
ref.current = "hi" // { current: "hi" }

반환된 ref 컴포넌트의 전 생애 주기 통해 유지 된다. 즉 컴포넌트가 계속 랜더링 되어도 unmount 되기 전까지는 값을 그대로 유지할 수 있다. 그리고 ref 값이 바뀌어도 리랜더링은 일어나지 않는다.

어디에 쓰나?

• 저장 공간

  React 에서 stete 가 바뀌면 리랜더링 된다. 하지만 state가 매번 바뀔때마다 계속 리랜더링이 될 필요는 없다면, 그때 useRef() 를 사용한다. Ref 가 바뀌는걸로는 리랜더링이 일어나지 않기 때문이다.

• DOM 요소에 접근하기

  예를 들어 로그인 화면에서 id 입력창을 클릭하지 않아도 바로 키보드로 입력을 할수 있도록 해야한다고 해보자. Ref 를 사용하면 쉽게 input 요소에 접근해서 focus 를 줄 수 있다. javascript의 Document.querySelector() 와 비슷하다.

// DOM 접근 예제
import React, { useEffect, useRef } from 'react'

const Login = () => {
  const inputRef = useRef();

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

  const login = ()=> {
    alert(`환영합니다 ${inputRef.current.value}`)
    inputRef.current.value = "";
    inputRef.current.focus();
  }

  return (
    <div style={{width:"200px", height:"100px", border:"2px solid blue", margin:"10px 0"}}>
      <input  ref={inputRef} type="text" placeholder="아이디"/>
      <input type="password" placeholder="비밀번호"/>
      <button onClick={login}>로그인</button>
    </div>
  )
}

export default Login