[React] useState vs useRef

최근 기술 면접을 보며

useState와 useRef의 차이를 아시나요?

라는 질문을 받았습니다. 당시 뭐라 답했는지 기억은 나지 않지만 긴장감 속에서 제대로 답하지 못했던 기억이 있습니다.

useState와 useRef에 대해서 정리해보겠습니다.

---

useState

공식 문서에 따르면

useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook 입니다.

React에서 컴포넌트는 자신의 상태 또는 props가 바뀌면 리렌더링 됩니다.
상태를 관리하기 위해 React에서 useState를 활용합니다.

const [state,setState] = useState(initialState);

useState는 상태 유지 값가 그 값을 갱신하는 함수를 반환합니다.
setState 함수는 새 state를 받아 컴포넌트 리렌더링 큐에 등록합니다.

컴포넌트는 다음 렌더링 시에 useState를 통해 반환받은 첫번째 값은 항상 갱신된 최신 state가 됩니다.

useState 예시

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

useState 주요 특징

• 비동기적 업데이트: setState는 비동기적으로 동작하며, 즉시 상태를 업데이트 하지 않습니다.
• 함수형 업데이트: 이전 상태를 기반으로 업데이트할 때는 함수형 업데이트를 사용할 수 있습니다.

---

useRef

공식 문서에 따르면

useRef렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook 입니다.

useRef는 useState와 달리 리렌더링을 유발하지 않습니다. 값이 변경되어도 컴포넌트가 다시 렌더링 되지 않습니다.
ref 속성을 사용하여 특정 DOM 요소에 접근할 때 활용되며 렌더링과 무관하게 값을 유지해야 할 경우 유용합니다.

useRef 예시

import { useRef } from "react";

function Example() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // input 요소에 직접 접근하여 포커스를 줌
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

---

useState와 useRef의 차이

특징	useState	useRef
값 변경 시 리렌더링	O	X
값 유지 여부	O	O
DOM 요소 접근	X	O
상태 변경 함수 제공	O(setState)	X(직접 수정)
값 접근 방법	변수로 직접 접근	.current 속성으로 접근
초기화 시점	컴포넌트 렌더링 마다	컴포넌트 마운트 시 한 번만
업데이트 시점	setState 호출 후 다음 렌더링	즉시

언제 사용할까?

• 컴포넌트가 변경된 값에 따라 리렌더링이 필요: useState
• 렌더링과 관계없이 값을 유지: useRef
• DOM 요소에 직접 접근: useRef

---

✅ 참고

• React_useState_docs
• React_useRef_docs
• useState vs useRef_현진