React-Hook-useRef

const ref = useRef(value);

위와 같이 사용하면 ref 변수 에는 아래와 같은 객체가 저장된다.

{current: value}

useRef 를 통해 저장된 객체는 mount 된 이후부터 unmount 될 때까지 값이 저장된다.

useRef의 용법

1. 저장공간
2. DOM 요소로의 접근

첫번째 용법 (저장공간으로 활용)

저장공간으로써의 useRef는 useState와 비슷하게 쓰일 수 있다.
다만 ⭐️useState는 값변경 -> 렌더링 -> 컴포넌트 내부 변수 초기화 과정을 거치는 반면
💕useRef는 값변경 -> 렌더링x -> 내부 변수값 유지의 과정을 거친다는 특징이 있다.

즉, 렌더링 없이 저장요소의 값을 변경해줄 변수가 필요하다 싶으면 useRef를 쓰면 된다.

이처럼 ref를 올렸을 때에는 페이지 렌더링이 되지 않는 것을 확인할 수 있다.
아래는 위를 구현한 코드이다.

import React, { useRef, useState } from 'react';



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

  const increaseCountState = ()=>{
    setCount(count+1);
    
  };

  const increaseRef = ()=>{
    ref.current = ref.current+1;
    console.log('ref: ',ref.current);
  }
  
  return (
   <div>
    <p>State: {count}</p>
    <p>Ref: {ref.current}</p>
    <button onClick={increaseCountState}>state 올리기</button>
    <button onClick={increaseRef}>ref 올리기</button>
   </div> 
  )
}

export default App;

두번째 용법 (DOM 요소로의 접근)

useRef를 사용하면 우리는 DOM 요소에 쉽게 접근하여, focus 기능등을 구현할 수 있다.

홈페이지가 처음 렌더링 될 때에, 로그인을 위해 아이디를 입력하는 input 창에 자동으로 focus가 가도록 만들고 싶다면 아래와 같이 하면 된다.
1️⃣ input 창에 ref 속성에 내가 지정한 ref 변수를 넣는다.

const inputRef = useRef();
<!-- 중략-->
<input ref = {inputRef} type='text' placeholder='username'/>

2️⃣ useEffect() 를 통해 첫 렌더링 시, inputRef의 focus 작업을 수행해준다.

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

3️⃣ 확인한다 😀

위 포스트는 https://youtu.be/VxqZrL4FLz8
별코딩님의 유튜브 강의를 기반으로 작성하였습니다.