🔮 React - 6. Ref와 DOM

Ref

• 참조(reference)의 줄임말로, React에서 DOM 요소나 클래스 컴포넌트 인스턴스에 대한 직접적인 참조를 생성하고, 저장하는 데 사용되는 객체 입니다.

사용 목적

• DOM 요소에 대한 참조
  👉 Ref를 사용하여 DOM 요소를 직접 조작할 수 있습니다. 이를 통해 포커스 설정, 텍스트 선택, 애니메이션 등을 구현할 때 유용합니다.

리액트 컴포넌트에서 id를 사용하면 안되는 이유!!!
 👉 리액트 컴포넌트 안에서도 id를 사용할 수는 있습니다. JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링 할 때 그대로 전달 됩니다. 하지만 특수한 경우가 아니면 사용을 권장하지 않습니다. 하나의 컴포넌트를 여러 번 호출하는 경우 유일해야 할 id가 중복 id로 만들어지게 됩니다.

useRef

• React Hook 중 하나로, 변경 가능한 객체를 참조하고 유지할 때 사용합니다.
• 이 객체는 .current 속성을 가지며, 이 속성은 초기값으로 설정되고 변경될 수 있습니다.
• 컴포넌트의 렌더링 사이에서 값을 유지하고자 할 때 사용되며, 주로 특정 요소에 포커스를 설정하거나 애니메이션을 적용할 때 유용할 수 있습니다.

포커스 설정

import React, { useRef } from 'react';

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

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}