React에서 DOM 요소를 선택하는 방법은 무엇입니까? React

의 document.getElementById()와 동등한 것은 무엇입니까? React에서는 바닐라 JavaScript로 작업하는 것과 달리 DOM 요소에 직접 액세스하는 것이 다릅니다. React는 가상 DOM을 사용하여 실제 DOM을 효율적으로 업데이트합니다. 이는 바닐라 JavaScript와 다릅니다.

DOM 요소에 액세스하는 방법

옵션 1: 참조 사용

• 함수 구성요소와 함께 Refs 사용:(v16.8.0) useRef 및 전달Ref를 사용합니다. useRef로 ref를 정의한 다음 이를 전달Ref를 사용하여 DOM 요소로 전달합니다. 요소에 액세스하려면 ref(ref.current)의 현재 속성을 사용하세요.

옵션 2: React.createRef 사용(v16.3 )

• React.createRef()를 사용하여 참조를 생성하고 나중에 액세스할 수 있도록 요소에 첨부합니다. ref.current를 사용하여 DOM 노드를 가져옵니다.

옵션 3: 콜백 패턴 사용(레거시)

• JSX에서 ref 속성 정의 요소를 입력하고 DOM 요소에 대한 참조를 수신하는 콜백 함수를 전달합니다.

옵션 4: 문자열 사용 Refs(레거시)

• ref 속성을 DOM 요소를 식별하는 문자열로 설정하여 문자열 참조를 사용합니다. this.refs.[stringRef]를 사용하여 요소에 액세스합니다.

예제

다음은 콜백 패턴을 사용하여 DOM 요소를 선택하는 예입니다.

  render() {
    return (
      

        
요소에 액세스하려면 this.progressBars[0], this.progressBars[1] 및 this.progressBars[2]를 사용하여 해당 요소에 대한 작업을 수행할 수 있습니다.