useRef

useRef

• 저장공간으로 State와 비슷하다.
• State와 다른점은 State는 State가 변화할때마다 렌더링되고 컴포넌트의 내부 변수들이 초기화 되는 반명 Ref는 렌더링이 일어나지 않고 변수들의 값이 유지된다.
• 렌더링이 일어나면 안될 요소에 사용하면 된다.
• JavaScript의 Document.querySelector()와 비슷하다.

useRef 사용

import React, { useState } from 'react';

const App = () => {
  const [count, setCount} = useState(0);
  const increaseCountState = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <p>State: {count}</p>
	  <button onClick={increaseCountState}>State 올려</button>
	</div>
  );
};

export default App;

• useState 사용시 State가 변화될때마다 화면이 렌더링

import React, { useRef } from 'react';

const App = () => {
  const [count, setCount} = useState(0);
  const countRef = useRef(0);
  
  const increaseCountState = () => {
    setCount(count + 1);
  };
  // useRef 접근 위해서는 countRef.current 사용
  const increaseCountRef = () => {
    countRef.current = countRef.current + 1;
  };
  
  return (
    <div>  
      <p>State: {count}</p>
	  <button onClick={increaseCountState}>State 올려</button>
	  <p>Ref: {countRef.current}</p>
	  <button onClick={increaseCountRef}>Ref 올려</button>
	</div>
  );
};

export default App;

• Ref는 Ref올려 버튼을 클릭해도 화면이 렌더링 되지 않기 때문에 화면상으로는 변화가 없고 내부적으로는 증가함.
• Ref올려 버튼을 클릭한 뒤 State올려 버튼을 클릭하면 화면이 렌더링 되기 때문에 Ref의 값도 변화한다.

useRef의 장점

• 컴포넌트가 많이 바뀌는 값에 useRef를 사용하면 효율적이다.

DOM요소 접근

• 화면에 처음 들어갔을 때 input요소에 바로 focus 되게끔 하기.

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

const App = () => {
  const inputRef = useRef();
  
  useEffect(() => {
    inputRef.current.focus();
  }, []); // 빈 배열을 넣으면 맨 처음 렌더링 될 때만 실행시켜준다.
  
  const login () => {
    alert('환영합니다 ${inputRef.current.value}!);
    inputRef.current.focus();
  }
  
  return (
  	<div>
      <input ref={inputRef} type="text" placeholder="username" /> //ref라는 속성에 inputRef 변수를 넣어주면 input이 useRef로 참조가 가능.
      <button onClick={login}>로그인</button>
    </div>
  );
};

export default App;