React에서 DOM 요소 선택

어느 시점에서 모든 JavaScript 개발자는 getElementById() 메서드를 사용했습니다. 하나의 인수 id를 취하고 해당 ID를 가진 HTML 요소를 반환합니다. 이 방법은 수동 DOM 변형을 수행하는 데 매우 유용합니다.

HTML 요소 노드를 잡는 것은 일반적인 필수 사항입니다. JavaScript에 경험이 있지만 React 프레임워크를 처음 접하는 많은 개발자는 React에서 이 작업을 수행하는 방법을 알고 싶어합니다.

React의 참조

참조의 줄임말인 Ref는 React에서 DOM에 액세스하는 쉬운 방법입니다. 요소(또는 구성요소)를 참조와 연결하려면 요소에 참조와 동일한 ref 속성이 있어야 합니다. 샘플 <div> 요소는 <div ref={this.testRef}></div>와 같은 방식으로 testRef에 연결할 수 있습니다. ref 인스턴스를 변수에 저장하는 것이 좋습니다.

기능 구성 요소에서

약 2년 전 후크가 도입된 이후로 기능적 구성 요소는 훨씬 더 강력해졌습니다. 최신 버전의 React(예: 16.8.0)를 실행 중인 경우 ref를 정의하는 데 사용할 수 있는 useRef() 후크를 가져올 수 있습니다. 다음은 렌더링 중에 임의 변수를 참조하는 기능 구성 요소의 예입니다.

function App() {
    const elementVariable = useRef(null)
    useEffect(() => console.log(elementVariable), [] )
    return (
        <div ref={elementVariable}>
           <h1></h1> 
        </div>
    )
}

이 예에서 elementVariable을 useRef() 후크의 인스턴스와 동일하게 설정하여 변수에 HTML 노드를 저장합니다.

HTML 요소에 ref 속성이 변수 이름으로 설정되어 있지 않으면 후크가 작동하지 않습니다.

useRef() 후크에 전달된 하나의 인수는 ref 인스턴스의 초기 값을 지정합니다. <div></div> 요소가 마운트되면 변수는 HTML 노드 값을 보유합니다. 콘솔은 다음과 같습니다.

클래스 구성 요소에서

오랫동안 클래스 구성 요소를 사용하는 것은 대화형 React 구성 요소를 만드는 기본 방법이었습니다.

버전 16.3 출시 이후 React 개발자는 React.createRef()를 사용하여 ref를 만들 수 있습니다. API는 다를 수 있지만 React.createRef() 및 useRef() 후크는 본질적으로 동일한 ref 인스턴스를 생성합니다.

클래스 구성 요소에서 ref 인스턴스는 클래스 속성에 저장됩니다. 다음은 예입니다.

class App extends Component {
  constructor(props){
    super(props)
    this.ref = React.createRef()
  }
  componentDidMount(){
    console.log(this.ref);
  }
  render() {
    return <h1 ref={this.ref}>Referenced Text</h1>;
  }
}

콘솔을 보면 HTML 노드를 포함하는 current 속성이 있는 개체를 볼 수 있습니다.

React 버전 >16.3을 사용하는 개발자는 참조를 생성하기 위해 약간 다른 구문을 사용해야 합니다. 예시:

<div ref={(element) => this.ref = element}></div>

이 방법으로 생성된 참조는 ref 속성을 HTML 요소를 인수로 사용하고 이 값을 클래스 인스턴스의 ref 속성에 할당하는 콜백 함수로 설정했기 때문에 콜백 ref라고 합니다.