useState vs useRef : React에서의 활용과 차이점

1. useRef와 useState의 차이점:

useState: useState는 함수형 컴포넌트에서 상태를 관리하기 위해 사용되는 React 훅입니다. 상태가 변경될 때마다 컴포넌트가 리렌더링되며, 상태를 변경하는 함수가 제공되어 새로운 값을 갱신할 수 있습니다.

useRef: useRef는 함수형 컴포넌트에서 변경 가능한 값을 유지하기 위해 사용됩니다. useRef로 생성된 변수는 컴포넌트 리렌더링과 관계없이 유지되며, 값을 변경해도 리렌더링이 발생하지 않습니다. 또한 useRef는 DOM 요소에 직접 접근하는데 사용되기도 합니다.

2. useRef의 활용

2-1 변수관리

useRef를 이용하여 컴포넌트 내부의 값들을 관리할 수 있습니다. useState로 처리하기에는 상태 변화에 따른 불필요한 리렌더링을 방지하고, 컴포넌트의 생명주기 동안 유지되어야 하는 값을 효율적으로 관리할 수 있습니다

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

const ExampleComponent = () => {
  const countRef = useRef(0); // useRef로 변수 초기화
  const [countState,setCountState] = useState(0);
  
  const increaseRef = () => {
    countRef.current += 1; // useRef로 변수 변경
    console.log(countRef.current);
  };
  
  const increaseState = () => {
  	setCountState(countState + 1);
    console.log(countState);
  }
  
  
  

  return (
    <div>
      <button onClick={increaseRef}>Increase Ref</button>
	  <button increaseState={increaseRef}>Increase State</button>
    </div> 
  );
}; 

2-2 Dom 요소 접근

useRef를 이용하여 DOM 요소에 접근할 수 있습니다. 예를 들어, useRef를 사용하여 input 요소에 접근하고, useEffect 내부에서 focus() 함수를 호출하여 해당 요소에 자동으로 포커스를 설정할 수 있습니다.

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

const LoginForm = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // input 요소에 자동으로 포커스 설정
  }, []);

  const login = () => {
    const username = inputRef.current.value; // input 요소의 값 가져오기
    alert(`로그인: ${username}`);
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={login}>Login</button>
    </div>
  );
};

useState와 useRef는 React에서 상태 관리와 컴포넌트 내부의 값을 다루는데 사용되는 중요한 훅입니다. useState는 상태를 관리하고 컴포넌트 리렌더링을 트리거하는데 사용되며, useRef는 컴포넌트 리렌더링과 상관없이 값을 유지하고 DOM 요소에 접근하는데 사용됩니다. useRef를 적절하게 활용하여 불필요한 리렌더링을 방지하고, DOM 조작에 편리하게 접근하는 방법을 익혀두면 React 애플리케이션 개발에 큰 도움이 될 것입니다.

REFERENCE

https://www.youtube.com/watch?v=VxqZrL4FLz8
https://www.youtube.com/watch?v=EMK8oUUwP5Q