[React] useState() VS useRef()

useState()와 useRef()의 차이에 대해서 알아보겠습니다

🍀 useState()

값을 저장함, state변경 시 자동적으로 HTML도 재렌더링
-> const [state, setState] = useState(초기값);

🍀 useRef()

값을 저장함, 변경 시 렌더링❌ // 변수들의 값이 유지됨
-> const ref = useRef(초기값);

일단 두 개 모두 값을 저장한다는 점에서는 같지만, 변경 시 *렌더링 에 차이가 있습니다

*렌더링: 코드로 정의된 내용이 실제 화면에 나타나는 것

---

더 자세히 코드와 gif예시를 통해 알아보겠습니다

🦋를 클릭 시useState()와 useRef() 의 초기 값(0)이 증가되도록 만들어진 프로젝트입니다

import { useState, useRef } from 'react'; // useState와 useRef사용
import './Use.css';
 
function Use() {
   const [countState, setCountState] = useState(0);
   const countRef = useRef(0);

   console.log('🐰 Rendering!') // 화면이 렌더링 될 때마다 콘솔에 찍힘
	
 
 	// 클릭 시 값 증가
   const upCountState = () => {
       setCountState(countState + 1)
   }

   const upCountRef = () => {
       countRef.current = countRef.current + 1;
       console.log("useRef: ", countRef.current)
   }
 
 // 화면에 보여지는 것
   return (
       <div className="Use">
           <div className="nav">
               <h4>useState() VS useRef()</h4>
           </div>
           <div className="list">
               <h4>
                   useState()
                 {/* upCountState함수 실행 */}
                   <span onClick={upCountState}>🦋</span>{countState}
               </h4>
           </div>
           <div className="list">
               <h4>
                   useRef()
                 {/* upCountRef함수 실행 */}
                   <span onClick={upCountRef}>🦋</span>{countRef.current}
               </h4>
           </div>
       </div>
   );
}
   

** gif예시

위의 gif를 통해 보면, useState()는 🦋를 클릭 시 컴포넌트가 렌더링되며 자동적으로 값이 증가하지만, useRef()의 경우 🦋를 클릭하여도 console창에서만 증가될 뿐, 화면에서는 어떠한 변화도 일어나지 않는 것을 볼 수 있습니다

---

📌 알 수 있는 것
   1. useState()는 *비동기적 이다
   *비동기(asynchronous): 한 작업이 완료되지 않아도 다음 작업을 시작할 수 있는 것

2. state 변경 = HTML 자동적으로 재렌더링

3. ref는 값을 저장해 놓았다가 렌더링 시 한 번에 저장된 값을 화면에 보여준다

---

이러한 점으로 미루어 보았을 때,

useState()는 상태변화를 실시간으로 반영하고 동적으로 관리 할 수 있다는 점에서 유용하지만,
너무 자주 업데이트되는 값에 useState()를 사용하면 렌더링이 지속적으로 일어나기 때문에 성능 저하가 불가피합니다

그렇기 때문에 상태변화 시 렌더링과 무관한 값을 저장할 때에는 useRef()를 쓰는 것이 적합합니다