React의 Ref와 DOM 이해: DOM 요소 액세스 및 조작-JS 튜토리얼-php.cn

Understanding Refs and the DOM in React: Accessing and Manipulating DOM Elements

React의 Ref와 DOM: DOM 요소 액세스 및 조작

React에서 refs는 DOM 요소에 직접 액세스하고 상호 작용하는 데 사용됩니다. React는 일반적으로 상태와 소품을 통해 선언적인 방식으로 DOM을 관리하지만 애니메이션, 양식 필드 포커스 또는 요소 크기 측정과 같이 DOM과 직접 상호 작용해야 하는 경우가 있습니다. 이러한 경우 참조는 기본 DOM 노드에 액세스하는 방법을 제공합니다.

1. React의 Ref는 무엇인가요?

ref(reference의 약자)는 DOM 요소나 React 구성 요소 인스턴스를 참조할 수 있는 객체입니다. Ref는 클래스 컴포넌트에서 React.createRef()를 사용하거나 함수 컴포넌트에서 useRef()를 사용하여 생성할 수 있습니다. Refs는 일반적으로 다음 용도로 사용됩니다.

DOM에 직접 액세스합니다(예: 입력 필드에 초점을 맞추거나 양식 요소의 값 가져오기).
명령형 애니메이션이나 액션을 트리거합니다.
직접 DOM 조작이 필요한 타사 라이브러리와 통합하세요.

2. Ref 생성 및 사용

클래스 구성요소:

클래스 컴포넌트에서는 React.createRef()를 사용하여 참조를 생성합니다. 생성된 참조는 ref 속성을 통해 DOM 요소에 첨부됩니다.

클래스 구성요소의 참조 예:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // Create a ref to access the input element
    this.inputRef = React.createRef();
  }

  handleFocus = () => {
    // Access the DOM node directly and focus the input element
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleFocus}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

로그인 후 복사

이 예에서는:

this.inputRef는 React.createRef()를 사용하여 생성됩니다.
참조는 ref 속성을 통해 요소를 삭제합니다.
handleFocus 메소드에서는 this.inputRef.current를 통해 입력 요소에 액세스하고 focus()를 호출하여 입력 필드에 프로그래밍 방식으로 초점을 맞춥니다.

기능 구성요소:

함수 구성 요소에서는 useRef 후크를 사용하여 참조가 생성됩니다. useRef 후크를 사용하면 다시 렌더링할 때에도 지속되는 변경 가능한 참조 객체를 생성할 수 있습니다.

기능 구성 요소의 참조 예:

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const handleFocus = () => {
    // Access the DOM node directly and focus the input element
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

로그인 후 복사

이 예에서는:

inputRef는 useRef 후크를 사용하여 생성됩니다.
참조는 ref 속성을 사용하는 요소입니다.
handleFocus 함수는 inputRef.current를 사용하여 입력 요소에 액세스하고 focus()를 호출하여 입력 필드에 초점을 맞춥니다.

3. 참조 사용 사례

아. DOM 요소 액세스

Ref는 일반적으로 DOM 요소에 직접 액세스하고 조작하는 데 사용됩니다. 예를 들어 텍스트 입력에 초점을 맞추거나 요소의 크기를 측정하는 것은 참조를 사용하여 쉽게 수행할 수 있습니다.

ㄴ. 집중력 관리

Ref를 사용하면 구성요소가 마운트될 때 또는 특정 작업 후에 입력 필드에 초점을 맞추는 등 요소에 대한 초점을 관리할 수 있습니다.

Ref를 사용한 포커스 관리의 예:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // Create a ref to access the input element
    this.inputRef = React.createRef();
  }

  handleFocus = () => {
    // Access the DOM node directly and focus the input element
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleFocus}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

로그인 후 복사

이 예에서는 useEffect 후크와 참조 덕분에 구성요소가 마운트될 때 입력에 자동으로 초점이 맞춰집니다.

ㄷ. 애니메이션 트리거 또는 타사 라이브러리와 통합

참조는 종종 타사 라이브러리와 상호 작용하거나 명령형 애니메이션을 트리거하는 데 사용됩니다. 예를 들어 참조를 사용하여 맞춤 애니메이션을 제어하거나 jQuery와 같은 비React 라이브러리와 상호작용할 수 있습니다.

디. 양식 검증

Ref는 React 상태에 데이터를 저장하지 않고 양식 데이터를 수집하는 데에도 사용할 수 있으므로 실시간 업데이트가 필요하지 않은 양식에 대한 간단한 대안을 제공합니다.

4. 여러 요소에 대한 참조 관리

여러 요소로 작업할 때 객체나 배열에 참조를 저장하여 각 요소에 액세스할 수 있습니다.

여러 요소에 대한 참조의 예:

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const handleFocus = () => {
    // Access the DOM node directly and focus the input element
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

로그인 후 복사

이 예에서는 여러 입력 요소가 참조 배열을 사용하여 관리되고 버튼을 사용하여 두 번째 입력에 초점을 맞춥니다.

5. 참조 대 상태

ref가 DOM과 상호작용하는 방법을 제공하는 반면, React의 state는 UI 렌더링에 영향을 미치는 데이터를 관리하는 데 사용됩니다. 각 항목을 언제 사용해야 하는지 이해하는 것이 중요합니다.

상태는 동적 렌더링에 사용됩니다. 데이터가 변경되어 UI 렌더링 방법에 영향을 미치는 경우 상태를 사용하세요.
참조는 명령형 작업에 사용됩니다. DOM 요소와 직접 상호작용해야 하는 경우(예: 초점 맞추기, 측정 또는 애니메이션 트리거) 참조를 사용하세요.