[React] useRef

react

1. ref 사용하기 

 

1-1. ref의 개념

ref는 인강을 보고 이해가 잘 가지 않아서 추가로 잘 정리된 유튜브 강의를 참고했다. (1. React Hooks에 취한다 - useRef 완벽 정리 1# 변수 관리 | 리액트 훅스 시리즈, 2. )

ref는 컴포넌트에 접근할 수 있는 특수한 어트리뷰트이다. 

는 2가지가 있다. 

const ref = useRef(value)로 사용한다. ref는 {current:value} 형태이다!  반환된 ref는 컴포넌트의 전 생애주기를 통해 유지된다!  컴포넌트가 unMount 되기 전까지는 값을 유지할 수 있다! 

 

1-2. ref가 유용한 경우

1) 저장공간

• state를 사용하는 경우
  • state의 변화 → 컴포넌트 다시 렌더링 → 컴포넌트 내부 변수들 초기화 
  • 원하지 않는 리렌더링으로 고생할 수 있음. 
• ref에 값을 저장하는 경우 
  • ref의 변화(ref의 속의 값 변경) → 컴포넌트 다시 렌더링 X → 변수들의 값이 유지됨 
  • state의 변화 → 컴포넌트 다시 렌더링 → 그래도 ref의 값은 유지됨. 
  • 변경 시 렌더링을 발생시키지 말아야 할 값들을 저장하는데 유용함. 

2) DOM 요소에 접근 

• 예를 들어 input요소를 클릭하지 않아도 focus()를 주고 싶을 때 많이 사용된다. (로그인 화면에서!!) js의 document.qureySelector() 같다!!

 

3. 실습

3-1. 저장공간(렌더링 X)

3-1-1. 실습 1  

import React, { useState, useRef } from 'react';
import './style.css';

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

  console.log('렌더링');
  const increaseCountState = () => {
    setCount(count + 1);
  };
  const increaseCountRef = () => {
    countRef.current += 1;
    console.log('ref:', countRef.current);
  };
  return (
    <div>
      <p>State: {count}</p>
      <button onClick={increaseCountState}>State 올료!</button>
      <p>Ref: {countRef.current}</p>
      <button onClick={increaseCountRef}> Ref 올료!</button>
    </div>
  );
}

ref 올려 버튼을 클릭해도 렌더링이 되지 않기 때문에 화면상에서는 변화가 없는 것처럼 보인다. state 올려 버튼을 클릭하면 렌더링이 되면서  state 값과 이제까지 변경되면서 저장되어 있던 ref값이  화면에 표시된다! 

엄청 자주 바뀌는 값의 경우 계속해서 리렌더링이 되는 state 보다 ref가 성능상 더 좋다. 

3-1-2.  실습 2 -  useRef와 변수(let)의 차이! 

변수 let의 경우 렌더링이 될 때마다 계속해서 초기화가 된다. 하지만 ref의 경우 컴포넌트가 mount 돼서 unmount 될 때까지 그 값이 초기화되지 않고 저장되어 있다.

별코딩 캡쳐본

별코딩 캡쳐본 2

별코딩 캡쳐본3

 

 

3-1-3. 실습 3 -  몇 번 렌더링 되었는지 알아보기!! 

useEffect에서 setCount의 값을 변경하면 State는 값이 변경되면 리렌더링 되기 때문에 무한으로 리렌더링 되게 된다!! 

그래서 값이 바뀌어도 렌더링을 발생시키지 않는 useRef를 사용해서 페이지가 몇 번 렌더링되었는지 알 수 있다. 

 

3-2. DOM요소 접근하기 

3-2-1. 첫 렌더링시 input에 포커스되도록하기!