useState와 useRef : 리액트 상태 관리의 핵심 차이

jinew·2025년 1월 27일
ReactTIL
1

🥝 React

목록 보기
2/4
post-thumbnail

리액트를 사용하다 보면 컴포넌트의 상태를 관리하기 위해 useState와 useRef라는 훅을 자주 접하게 된다. 두 훅은 모두 상태 관리와 관련이 있지만, 그 목적과 동작 방식이 크게 다르다. 이번 주제에서는 useState와 useRef의 차이점과 사용 사례를 자세히 알아보려고 한다!



1. useState : 상태와 렌더링을 관리하는 훅

: useState는 리액트에서 상태를 관리하기 위한 가장 기본적인 훅이다. ① 상태 값과 ② 그 상태를 변경하는 함수를 제공하며, 상태가 변경될 때마다 컴포넌트가 리렌더링된다.

✅ 주요 특징

  • 상태 값 저장 : 컴포넌트의 상태를 저장
  • 렌더링 트리거 : 상태가 변경되면 컴포넌트가 다시 렌더링됨
  • 초기값 설정 : 초기 상태 값을 설정할 수 있음

✅ 사용 사례

1. 사용자 입력 관리

  import { useState } from 'react';

  function InputExample() {
      const [value, setValue] = useState('');

      return (
          <input
              type="text"
              value={value}
              onChange={(e) => setValue(e.target.value)}
          />
      );
  }
  • 사용자가 입력한 값을 실시간으로 상태에 반영

2. UI 업데이트

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

      return (
          <button onClick={() => setCount(count + 1)}>
              Count: {count}
          </button>
      );
  }
  • 버튼을 클릭하면 상태가 변경되고 UI가 업데이트 됨


2. useRef : 값 저장과 DOM 접근을 위한 훅

: useRef는 컴포넌트의 상태를 저장하지만, 상태 변경이 컴포넌트를 리렌더링하지는 않는다. 주로 DOM 요소에 접근하거나 이전 값을 저장하는 데 사용된다.

✅ 주요 특징

  • 값 저장 : 값은 저장되지만 변경해도 컴포넌트가 다시 렌더링되지 않음
  • DOM 접근 : DOM 요소에 직접 접근
  • 초기값 설정 : 초기 값을 설정할 수 있음

✅ 사용 사례

1. DOM 요소 접근

import { useRef, useEffect } from 'react';

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

    useEffect(() => {
        inputRef.current.focus();
    }, []);

    return <input ref={inputRef} type="text" />;
}
  • 컴포넌트가 마운트된 후 입력 필드에 자동으로 포커스

2. 이전 값 저장

import { useRef, useEffect } from 'react';

function PreviousValue({ value }) {
    const prevValue = useRef();

    useEffect(() => {
        prevValue.current = value;
    }, [value]);

    return (
        <div>
            Current: {value}, Previous: {prevValue.current}
        </div>
    );
}
  • 이전 상태 값을 저장하고 현재 값과 비교


3. 렌더링과의 관계

: useState와 useRef의 가장 큰 차이점은 렌더링에 미치는 영향이다.

  • useState: 상태가 변경되면 컴포넌트가 다시 렌더링된다.
  • useRef: 값이 변경되어도 컴포넌트는 다시 렌더링되지 않는다.
import { useState, useRef } from 'react';

function Example() {
    const [state, setState] = useState(0);
    const ref = useRef(0);

    const updateState = () => setState(state + 1);
    const updateRef = () => ref.current += 1;

    console.log('Component rendered');

    return (
        <div>
            <button onClick={updateState}>Update State</button>
            <button onClick={updateRef}>Update Ref</button>
        </div>
    );
}
  • 위 코드에서 updateState 버튼을 클릭하면 컴포넌트가 다시 렌더링되지만, updateRef 버튼은 렌더링에 영향을 주지 않는다.


4. 언제 어떤 훅을 사용할까?

useState를 선택할 때

  • 상태 변경이 UI에 영향을 미칠 때
  • 사용자 입력, 데이터 페칭 등 컴포넌트 렌더링이 필요한 경우

useRef를 선택할 때

  • 렌더링을 피하면서 값을 저장해야 할 때
  • DOM 요소에 접근하거나, 이전 상태 값을 저장할 때


useState와 useRef는 각각의 용도와 특징이 명확한 훅이다. useState는 상태 변경과 함께 컴포넌트를 재렌더링하며, UI 업데이트를 다룰 때 적합하다. 반면 useRef는 렌더링 없이 값을 저장하거나 DOM 요소에 접근할 때 유용하다. 두 훅의 차이점을 이해하고 적절히 활용하면 리액트 애플리케이션의 성능과 유지보수성을 크게 향상시킬 수 있다.

이렇게 개념만 읽어보면 확실히 두 개의 차이점을 알겠는데,. 실제 구현해야 하는 기능별로 생각해보면 또 감이 안 온다. 재밌게 읽은 글들을 남기고.. . 아디오스..



참고한 글

profile
jinew
멈추지만 않으면 도착해 🛫
이전 포스트

리액트의 핵심 개념: 컴포넌트, 상태, 그리고 props

다음 포스트

React는 왜 Hooks를 배열로 관리할까?

0개의 댓글

관련 채용 정보