React에서 DOM 요소에 액세스

1. React에서 getElementById()의 대안
2. React 기능 구성 요소의 참조
3. React 클래스 구성 요소의 참조

React는 JavaScript 기반 프레임워크이지만 가상 DOM으로 작동합니다. React API는 기본 JavaScript와 다른 메서드 및 속성으로 구성됩니다.

웹 애플리케이션을 구축할 때 개발자는 종종 Document.getElementById() 메서드를 사용합니다. 이 메서드는 ID를 지정하고 특정 HTML 요소로 작업할 수 있습니다.

React에서 getElementById()의 대안

React에는 기본 JavaScript 인터페이스 위에 구축된 고유한 규칙과 시스템 계층이 있습니다. React에서 특정 DOM 노드에 액세스하려면 Document.getElementById() 메서드 대신 refs를 사용해야 합니다.

‘Refs’는 입력 요소에 입력된 값 가져오기, 포커스가 있을 때 요소의 모양 제어, 애니메이션 재생 등과 같은 다양한 목적으로 사용될 수 있습니다.

여전히 기본적으로 React는 애플리케이션의 UI를 구축하기 위한 선언적 접근 방식을 따릅니다. Refs는 이 접근 방식의 예외이므로 예외적인 경우에만 사용해야 합니다.

React 기능 구성 요소의 참조

React v16.8에 후크가 도입된 이후 개발자는 기능 구성 요소에서 refs를 만들 수 있습니다. useRef 후크는 핵심 React 라이브러리에서 가져올 수 있습니다.

이 예를 살펴보겠습니다.

import "./styles.css";
import { useRef } from "react";
export default function App() {
  const header = useRef(null);
  console.log(header);

  return (
    <div className="App">
      <h1 ref={header}>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

header 변수를 null 값이 있는 ref로 초기화합니다.

JSX에서는 <h1> 요소의 ref 속성을 이 변수로 설정합니다. 그런 다음 변수를 console.log()하고 이 라이브 데모에서 콘솔을 확인하면 변수에 <h1> DOM 노드를 나타내는 값이 포함됩니다.

React 클래스 구성 요소의 참조

React 개발자는 Class 구문을 사용하여 구성 요소를 만들 수도 있습니다. 이 예에는 이전 예의 기능적 구성 요소와 동일한 작업을 수행하는 구성 요소가 있습니다.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.header = React.createRef();
  }
  render() {
      return <h1 ref={this.header}>Hello CodeSandbox</h1>;
  }
}

주요 차이점은 구문입니다. React.createRef() 메서드를 사용하여 ref를 설정합니다.