useState() vs. useRef(): 리액트에서의 기술적 차이점 이해하기

리액트(React)는 개발자들이 재사용 가능하고 모듈화된 사용자 인터페이스를 생성할 수 있게 해주는 인기 있는 자바스크립트 라이브러리입니다. 리액트에서는 다양한 훅(Hook)을 제공하며, 그 중에서도 useState()와 useRef()는 가장 많이 사용되는 두 가지 훅입니다. 이 두 훅은 각각 다른 목적을 가지고 있으며, 적절하게 사용하면 리액트 애플리케이션의 성능과 효율성을 크게 향상시킬 수 있습니다. 이번 글에서는 useState()와 useRef()의 차이점과 각각의 사용 시점을 자세히 알아보겠습니다.

 

useState() vs. useRef(): 리액트에서의 기술적 차이점 이해하기

 

useState()란 무엇인가?

useState()는 리액트에서 함수형 컴포넌트에 상태(state)를 추가할 수 있게 해주는 내장 훅입니다. 이 훅은 초기 값을 인수로 받아들이며, 현재 상태와 그 상태를 업데이트하는 함수를 반환합니다. 이를 통해 컴포넌트의 상태를 관리하고, 상태가 변경될 때 컴포넌트를 다시 렌더링할 수 있습니다.

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

 

 

위 예제에서 useState() 훅을 사용하여 count라는 변수를 정의하고 초기 값을 0으로 설정합니다. 또한, handleClick()이라는 함수는 setCount()를 호출하여 count 상태를 업데이트합니다. 사용자가 버튼을 클릭하면 handleClick() 함수가 호출되어 count 상태가 업데이트되고, 컴포넌트가 다시 렌더링됩니다.

 

 

useRef()란 무엇인가?

useRef()는 또 다른 리액트 내장 훅으로, 렌더링 간에 유지되는 변경 가능한 값을 저장할 수 있습니다. useState()와 달리, useRef()는 값이 변경되더라도 컴포넌트를 다시 렌더링하지 않습니다. 주로 DOM 요소나 특정 값에 대한 참조를 유지하고자 할 때 사용됩니다.

import React, { useRef } from 'react';

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

  function handleSubmit(event) {
    event.preventDefault();
    console.log(inputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

 

 

위 예제에서는 useRef() 훅을 사용하여 입력 필드의 참조를 생성합니다. 사용자가 폼을 제출하면 handleSubmit() 함수가 호출되어, 입력 필드의 현재 값을 콘솔에 출력합니다. 이 과정에서 inputRef 값이 변경되더라도 컴포넌트는 다시 렌더링되지 않습니다.

 

useState()와 useRef()의 주요 차이점

useState()와 useRef()는 각각 다른 용도로 사용되며, 이들의 차이점은 다음과 같습니다:

1. 렌더링 트리거: useState()는 상태 값이 변경될 때 컴포넌트를 다시 렌더링하는 반면, useRef()는 값이 변경되더라도 렌더링을 트리거하지 않습니다. 따라서 상태 변경이 컴포넌트의 UI에 영향을 미치는 경우에는 useState()를, 그렇지 않은 경우에는 useRef()를 사용하는 것이 적합합니다.
2. 상태 관리: useState()는 컴포넌트의 상태를 관리하는 데 사용됩니다. 상태는 컴포넌트의 외형이나 동작에 영향을 미치는 값들을 저장하고 업데이트하는 역할을 합니다. 반면, useRef()는 컴포넌트의 상태에 직접적인 영향을 미치지 않는 변경 가능한 값을 저장하는 데 사용됩니다. 예를 들어, DOM 요소에 대한 참조나 렌더링 간에 유지되어야 하는 값들을 저장할 수 있습니다.
3. 반환 값의 유형: useState()가 반환하는 값은 항상 상태 값과 그 상태를 업데이트하는 함수로 구성된 배열입니다. 반면, useRef()는 .current라는 속성을 가진 객체를 반환하며, 이 속성에 저장된 값은 렌더링 간에 변경 가능합니다.

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  function handleClick() {
    myRef.current.style.color = 'red';
  }

  return (
    <div>
      <p ref={myRef}>This text can be changed</p>
      <button onClick={handleClick}>Change text color</button>
    </div>
  );
}

 

 

이 예제에서는 useRef()를 사용하여 p 요소에 대한 참조를 생성하고, 사용자가 버튼을 클릭하면 p 요소의 텍스트 색상이 변경됩니다. 이 과정에서 myRef는 컴포넌트의 상태를 관리하는 데 사용되지 않고, DOM 요소에 대한 참조를 저장하는 역할을 합니다.

 

useState()와 useRef()의 비교

특징useState()useRef()

목적	컴포넌트의 상태를 관리합니다.	DOM 요소 또는 값에 대한 변경 가능한 참조를 생성합니다.
저장할 수 있는 값의 유형	직렬화 가능한 모든 자바스크립트 값 (객체, 배열 등).	모든 자바스크립트 값.
반환 값	상태 값과 그 값을 업데이트하는 함수.	.current 속성을 가진 변경 가능한 객체.
초기 값	useState() 함수에 인수로 전달됩니다.	useRef() 함수에 인수로 전달됩니다.
렌더링 트리거	상태 값이 변경될 때 컴포넌트를 다시 렌더링합니다.	값이 변경되어도 컴포넌트를 다시 렌더링하지 않습니다.
사용 사례	시간에 따라 변경되는 컴포넌트 상태 관리 (예: 사용자 입력, 컴포넌트 가시성).	DOM 노드 또는 렌더링 간에 유지되어야 하는 값 저장.
값 업데이트	useState()가 반환한 업데이트 함수를 호출합니다.	.current 속성을 직접 업데이트합니다.
값 접근	useState()가 반환한 상태 값을 사용합니다.	useRef()가 반환한 객체의 .current 속성을 통해 값에 접근합니다.

 

 

결론

결론적으로, useState()와 useRef()는 리액트에서 각각 다른 목적을 수행하는 중요한 훅입니다. useState()는 컴포넌트의 상태를 관리하고, 상태 값이 변경될 때 컴포넌트를 다시 렌더링하는 데 사용됩니다. 반면, useRef()는 값이 변경되더라도 렌더링을 트리거하지 않는 변경 가능한 참조를 생성하는 데 사용됩니다.

useState()는 시간에 따라 변화하는 컴포넌트 상태를 관리하는 데 유용하며, 사용자 입력이나 컴포넌트 가시성과 같은 상황에서 주로 사용됩니다. 반면, useRef()는 DOM 요소나 렌더링 간에 유지되어야 하는 값을 저장하는 데 적합합니다.

이 두 훅의 차이점과 사용 사례를 이해하면, 보다 효율적이고 효과적인 리액트 컴포넌트를 작성하는 데 도움이 될 것입니다.