useRef와 useState의 차이

React에서 useRef와 useState는 상태를 관리하고 요소를 참조하는데 사용되지만, 목적과 동작 방식이 다르다.

 

1. useRef

useRef는 React의 훅으로, DOM 요소나 변경 가능한 값을 참조할 때 사용된다.

 

특징

• 값이 변경되어도 렌더링을 트리거하지 않음 : useRef로 저장된 값은 변경되더라도 컴포넌트가 다시 렌더링되지 않음
• 초기화 : useRef는 인자로 초기값을 받을 수 있으며, 초기값은 .current프로퍼티로 접근할 수 있다.
• DOM 참조 : 주로 특정 DOM요소를 참조하거나 저장하기 위해 사용된다.
• 변경 가능한 값 저장 : 렌더링 관련 없이 값을 유지하고 싶을 때 사용된다.

사용 예시

 

1. DOM 참조 

import React, { useRef } from "react";

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

  const focusInput = () => {
    inputRef.current.focus(); // input 요소에 포커스를 설정
  };

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

 

 

2. 값 저장 및 유지(렌더링 트리거 방지)

import React, { useRef } from "react";

const App = () => {
  const count = useRef(0);

  const increment = () => {
    count.current += 1; // 값은 변경되지만 렌더링은 발생하지 않음
    console.log(count.current);
  };

  return <button onClick={increment}>Increment</button>;
};

 

 

2. useSTate

useState는 React의 상태 관리 훅으로, 컴포넌트의 렌더링을 트리거하는 상태 값을 관리하는데 사용된다.

 

특징

• 값이 변경되면 렌더링 트리거 : useState로 저장된 값이 업데이트되면 컴포넌트가 다시 렌더링된다.
• 초기값 설정 : useState는 인자로 초기값을 받으며, 상태 값과 이를 업데이트 하는 함수(setter)를 반환한다.
• 상태 업데이트 함수 : 상태를 업데이트 할 때 setState함수를 사용해야 한다.

사용 예시

 

1. 상태 관리

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1); // 상태 변경, 렌더링 트리거
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

 

 

2. 사용자 입력 관리

import React, { useState } from "react";

const App = () => {
  const [text, setText] = useState("");

  const handleChange = (event) => {
    setText(event.target.value); // 입력값 변경 시 렌더링
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>입력한 값: {text}</p>
    </div>
  );
};

 

 

3. 차이점 비교

	useRef	useState
목적	DOM 참조 또는 값 유지	상태 값 관리 및 렌더링 트리거
렌더링 트리거	값 변경 시 렌더링되지 않음	값 변경 시 렌더링됨
초기값 설정	.current로 접근 (useRef(initialValue))	상태 값과 setState로 관리 (useState(initialValue))
주요 사용 사례	DOM 요소 참조, 렌더링과 무관한 값 저장	컴포넌트 상태 관리

 

 

4. 언제 어떤 것을 사용해야 할까?

• 렌더링 트리거가 필요하다면 useState : 사용자 입력, 데이터 업데이트, UI 상태 변경 등을 관리할 때
• 렌더링 트리거가 필요 없다면 useRef :  DOM 요소를 참조하거나 렌더링과 관계없는 값을 저장할 때