[React] (Hook) useState vs useRef

React에서 변수의 상태나 Form양식의 데이터들을 관리하다 보면 Hook을 사용할 일이 많다. 이 페이지에서는 useState와 useRef의 차이점을 정리하고자 한다. 둘의 차이점을 알아보기 전에 Hook의 개념을 간단하게 알아볼 필요가 있다. 따라서 Hook에 대해 정리하고 useState와 useRef의 차이점에 대해 정리해 보려고 한다.

[목차]

1. React Hook이란?
2. useState와 useRef의 비교
   1. 차이점 
   2. 사용 예시
3. 정리

---

1. Hook이란?

Hook은 리액트의 함수 컴포넌트에서 상태(React state) 와 생명주기 기능( lifeCycle features)을 연결하는 함수이다.

기존에는 Class형 컴포넌트에서만 상태를 관리할 수 있었고 함수형 컴포넌트에서는 상태를 관리할 수 없었다.

하지만 Hook의 등장으로 Hook을 통해 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었고, 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 되었다.

 

2. useRef와 useState의 차이점

1) 기본적인 차이점

useState

• useState는 주로 컴포넌트의 상태값을 나타내는 값이다.
• useState는 렌더링 결과에 영향을 주는 값이고 값이 변경될 때 마다 렌더링된다.
• 주로 컴포넌트의 상태를 관리하고 상태가 변경될 때 UI를 갱신하는 데 사용한다.

 

useRef

• useRef는 주로 참조를 관리하기 위해 사용된다.
• 참조는 일반적으로 DOM요소나 컴포넌트 인스턴스를 가리키는 객체이다.
• useRef를 통해 참조를 생성하면 컴포넌트 함수 내에서 참조를 통해 해당 DOM요소나 컴포넌트 인스턴스에 직접 접근할 수 있다.
• useRef를 이용하여 컴포넌트 함수 내에서 변수를 유지할 수 있다.
• useRef는 함수 컴포넌트에서 mutable한 객체를 생성하고 유지할 때 사용됩니다.
• 리렌더링과 관련이 없이 값을 저장하고 유지할 수 있습니다.
• useRef로 생성된 객체는 변경되어도 컴포넌트가 다시 렌더링되지 않습니다.

• 주로 DOM 요소에 접근하거나 컴포넌트의 생명주기와 독립적으로 값을 유지할 때 사용됩니다.

 2) 사용 예시

ex) useState

import React, { useState } from 'react';

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

  return (
    <div>
      <p> Click한 횟수: {count}회</p>
      <button onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
}

 

 

ex) useRef

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

function ExampleComponent() {
  const countRef = useRef(0);

  useEffect(() => {
    console.log("Component did mount");
  }, []);

  const handleClick = () => {
    countRef.current += 1;
    console.log("You clicked", countRef.current, "times");
  };

  return (
    <div>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

 

 

 

 

요약

 useState는 컴포넌트의 상태를 다룰 때 사용되고, 이로 인해 컴포넌트가 리렌더링됩니다. 반면에 useRef는 리렌더링과 무관하게 값을 유지하고 주로 DOM에 접근하거나 생명주기와 관련이 없는 값을 관리할 때 사용됩니다.

 

정리하자면, 상태의 변화에 따라 UI가 실시간으로 업데이트되어야 하는 경우 useState를 사용하고, 리렌더링과 관계없이 값만 유지하면 되는 경우 useRef를 사용하는 것이 일반적이다.

 

useState 는 컴포넌트 상태를 관리하는 값이고

useRef는 참조를 생성하여 관리합니다

 

useState는 값이 변경이 될 때 마다 렌더링이 되지만 useRef는 렌더링과 상관없이 참조를 관리합니다

 

 

https://uou413.tistory.com/57

[React]Hooks함수 정리1(useState, useRef, useEffect, useContext)

https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref

Hooks API Reference – React