React Hooks의 useState、useRef

React Hooks는 클래스 구성 요소를 작성하지 않고도 기능 구성 요소에서 상태 및 기타 React 기능을 사용할 수 있도록 하는 React 16.8에 도입된 새로운 기능입니다. 일반적으로 사용되는 React Hooks 중 두 가지는 useState와 useRef입니다.

useState는 기능적 구성 요소에서 상태를 선언하고 관리하는 데 사용되는 함수입니다. 초기 상태 값을 매개변수로 받아들이고 현재 상태 값과 업데이트된 상태 값이 포함된 배열을 반환합니다. 할당을 구조화함으로써 상태를 쉽게 얻고 업데이트할 수 있습니다.

예를 들어 함수 구성 요소에서 useState를 사용하여 카운터를 만들 수 있습니다.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

위의 예에서는 useState를 사용하여 count라는 상태를 선언하고 초기 값을 0으로 설정합니다. 또한 카운트 상태를 업데이트하기 위해 setCount라는 함수를 선언합니다. 버튼을 클릭하면 increment 함수를 호출하여 카운트 상태 값을 1씩 증가시키고, setCount 함수를 통해 카운트 값을 업데이트합니다.

useRef는 기능적 구성요소에서 변경 가능한 참조를 생성할 수 있게 해주는 또 다른 React Hook입니다. useRef는 구성 요소의 수명 동안 변경되지 않고 유지되는 변경 가능한 ref 개체를 반환합니다.

일반적인 사용 사례는 필요할 때 DOM 요소의 속성과 메서드에 액세스하기 위해 ref 객체를 DOM 요소에 바인딩하는 것입니다.

예를 들어, useRef를 사용하여 입력 상자의 값을 얻을 수 있습니다.

import React, { useRef } from 'react';

function Input() {
  const inputRef = useRef();

  const handleButtonClick = () => {
    alert(inputRef.current.value);
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>Show Value</button>
    </div>
  );
}

위의 예에서는 useRef를 사용하여 inputRef라는 참조를 만들었습니다. 그런 다음 inputRef 참조를 텍스트 입력 상자의 ref 속성에 전달하여 DOM 노드를 inputRef와 연결합니다.

버튼을 클릭하면 inputRef.current.value를 통해 입력 상자의 값을 가져와서 경고 기능을 통해 표시합니다. inputRef는 변경 가능한 객체이므로 구성 요소의 수명 주기 동안 상태를 유지할 수 있으며 구성 요소가 다시 렌더링될 때 변경되지 않습니다.

요약하자면, useState를 사용하면 함수 구성 요소에서 상태를 선언하고 관리할 수 있으며, useRef를 사용하면 함수 구성 요소에서 변경 가능한 참조를 만들 수 있습니다. 이 두 가지 React Hooks는 상태 및 DOM 작업을 처리하는 보다 편리하고 유연한 방법을 제공합니다.

React Hooks의 useState、useRef

Supongo que te gusta