useRef 복습 - 변수관리 (state와는 다르다!)

useRef 에 대해서 애매한 부분이 있어 다시 공부해보았다.

 

DOM 요소에 접근할때만 사용한다 생각했는데, 다시 공부해보니 값 변경 시 불필요한 렌더링을 발생시키지 말아야할 경우 (뭔가 굉장히 자주 바뀌는 값이 있을 때) state 대신 사용하면 매우 유용할 것 같다. 

 

const ref = useRef(value)

{current:value} 객체를 반환해준다.

 

 

반환된 ref 는 컴포넌트의 생애주기 동안 유지가 되서 컴포넌트가 계속해서 렌더링이 되어도 일반 변수와 다르게 초기화가 되지 않고, unmount되기 전까지는 값을 그대로 유지할수있다.

 

 

1- 어떤 값을 저장해두는 저장공간으로써 사용 

 

 

state 변화 => 새로 컴포넌트 렌더링 => 함수형 컴포넌트 내부의 함수들이 다시 호출되고 그 내부의 변수들도 전부 초기화됨

state 변화 => 새로 컴포넌트 렌더링 => 그냥 변수들은 초기화되어도 ref값은 유지가 된다

 

state대신 ref안에 값을 저장해두면?

ref 변화 => No 렌더링 => 함수 내부 변수들 값 유지

 

state와의 큰 차이점 = 값이 업데이트되어도 컴포넌트가 재렌더링되지 않고 값만 변경한다!!

따라서, state 대신 ref를 사용하면 불필요한 렌더링을 막아줄 수 있다. 

변경 시 렌더링을 발생시키지 말아야하는 값을 다룰 때 ref를 쓴다.

 

import { useRef, useState } from 'react'

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

  console.log('렌더링하는중~~')

  const increaseCount = () => {
    setCount(count + 1)
  }

  const increaseRef = () => {
    ref.current += 1
    console.log(ref)
  }

  return (
    <div >
      <p>State: {count}</p>
      <p>Ref: {ref.current}</p>
      <button onClick={increaseCount}>state 올려</button>
      <button onClick={increaseRef}>ref 올려</button>
    </div>
  );
}

export default App;

 

state 올려를 5번 눌렀더니 컴포넌트 내부 '렌더링하는중~~'콘솔이 첫 렌더시 1번 + 5번 누르는 만큼 찍힌다.

반면, ref 올려를 누르면, '렌더링하는중~~'콘솔은 찍히지 않고 increaseRef 함수 내부의 콘솔만 찍힌다. 

ref올려를 두 번 누르면 {current:1}  {current:2}.. 만 콘솔에 찍히고 화면은 Ref : 0 을 유지 중이다.

즉, ref값은 계속해서 바뀌는 중이지만 컴포넌트는 렌더링 되지 않는다는 의미이다. 

 

 

이 때, state 올려를 누르면 ? state값 변경은 당연히 됨과 동시에 여태 몰래 업데이트 되고 있던 Ref 값도 화면상에 렌더가 되었다! 

 

 

엄청 자주 바뀌는 값이 있는데 그걸 state 에 넣어뒀다면 state가 변경될 때마다 렌더링이 계속 될거고 그건 성능 저하로 연결될거다.

그래서 그런 값이 있을 경우 useRef 를 사용해주면 좋겠다!

 

 

2- DOM 요소에 접근할 때 사용

 

이건 아는 내용이니 생략하려고 했으나 까먹을 미래의 나를 위해서 다시 기록해둔다.

inputRef 를 찍어보면, 아래와 같이 current 속성에 input에 대한 모든 정보가 들어가 있다!

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

const App = () => {
    const inputRef = useRef();
    
    useEffect(()=>{
      // console.log(inputRef);
      inputRef.current.focus();
    },[]);
    
    const login = () => {
       alert(`환영합니다 ${inputRef.current.value}`)
    }
    return (
        <div>
            <input ref={inputRef} type="text" placeholder="username">
            <button onClick={login}>로그인</button>
        </div>
    );
};

export default App;

 

출처 : https://www.youtube.com/watch?v=VxqZrL4FLz8&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=3