React에서 DOM 요소에 액세스하는 방법: 참조 및 모범 사례에 대한 가이드?

React에서 DOM 요소에 어떻게 액세스하나요? React의 document.getElementById()와 동등한 것은 무엇입니까

이 기사에서는 React에서 DOM 요소에 액세스하는 방법을 살펴보겠습니다. 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리인 React는 바닐라 JavaScript에서 사용되는 전통적인 방법과 비교하여 DOM 관리에 대한 다른 접근 방식을 제공합니다. React는 UI 상태를 추적하는 가상 DOM을 활용하므로 선언적 방식으로 UI를 더 쉽게 업데이트하고 관리할 수 있습니다.

그러면 React 구성 요소 내에서 특정 DOM 요소에 어떻게 액세스할 수 있나요? ? 전통적으로 바닐라 JavaScript에서는 document.getElementById()와 같은 메서드를 사용하여 DOM 요소를 타겟팅하고 검색합니다. React에는 이를 달성하기 위한 여러 접근 방식이 있으며 시간이 지남에 따라 다양한 React 버전으로 발전해 왔습니다.

문자열 참조 사용(사용되지 않음):

이전 버전의 React에서 문자열 참조는 다음과 같습니다. 일반적으로 DOM 요소에 액세스하는 데 사용됩니다. 작동 방식은 다음과 같습니다.

<Progressbar completed={25}>

이 예에서는 값이 "Progress1"인 ref 특성이 Progressbar 구성 요소에 연결됩니다. DOM 요소에 액세스하려면 다음을 사용할 수 있습니다.

var object = this.refs.Progress1;

그러나 이 방법은 레거시로 간주되며 향후 React 릴리스에서 제거될 가능성이 높습니다. Facebook에서는 잠재적인 문제가 있으므로 문자열 참조 사용을 권장하지 않으며 대체 방법 사용을 권장합니다.

콜백 패턴 사용(React 16.2 이하 버전에 권장):

React 16.2 이상에 권장되는 접근 방식 이전에는 구성 요소의 렌더링 내에서 DOM 요소에 직접 액세스할 수 있는 콜백 패턴을 사용하는 것입니다. 메소드:

<Progressbar completed={25}>

이 예에서 ref 속성은 DOM 요소를 인수(이 경우 input)로 받는 화살표 함수로 정의됩니다. 구성 요소의 배열에 할당합니다. 이를 통해 구성 요소 내의 DOM 요소에 직접 액세스할 수 있습니다.

React.createRef() 사용(React 16.3 ):

React 16.3 이상 버전에서는 React.createRef( )은 참조를 만드는 데 사용됩니다. 일반적으로 생성된 참조를 생성자의 인스턴스 변수에 할당합니다.

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

DOM 요소에 액세스하려면 다음을 사용할 수 있습니다.

const node = this.myRef.current;

이 방법은 DOM 요소에 액세스하는 데 권장됩니다. React에서 사용되며 모범 사례로 간주됩니다.

React.forwardRef() 및 useRef() 사용(React 16.8 ):

React 16.8에 도입된 기능적 구성 요소에서는 useRef와 함께 React.forwardRef를 사용하여 참조를 생성하고 DOM 요소에 액세스할 수 있습니다. React.forwardRef는 참조를 DOM 요소로 전달하는 데 사용되며 useRef는 참조를 생성하는 데 사용됩니다.

const Child = React.forwardRef((props, ref) => {
  return <div ref={ref}>Child</div>;
});

const App = () => {
  const childRef = useRef(null);
  return <Child ref={childRef} />;
};

DOM 요소에 액세스하려면, 다음을 사용할 수 있습니다:

<Progressbar completed={25}>

참고: 문자열 참조는 권장되지 않으므로 위 권장 방법 중 하나를 사용하는 것이 좋습니다. React는 DOM 요소에 액세스하기 위한 다양한 옵션을 제공하며 선택은 사용 중인 React 버전에 따라 다릅니다.

위 내용은 React에서 DOM 요소에 액세스하는 방법: 참조 및 모범 사례에 대한 가이드?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!