react ref 예제

이 예제에서는 값을 입력하는 입력 필드를 만듭니다. 그런 다음 제출 단추를 클릭하면 이 값을 읽고 콘솔에 기록합니다. React.forwardRef 함수를 사용하여 참조를 구성 요소에 전달할 수 있습니다. 아래 예제를 살펴 보겠습니다: 공식 반응 문서에 따르면 , 문자열 참조는 더 이상 사용되지 않지만 레거시로 간주되며 향후 어느 시점에서 더 이상 사용되지 않을 수 있습니다. 콜백 참조가 선호됩니다. 참조를 얻는 방법을 살펴보고 전체 예제를 살펴보겠습니다. 참조된 구성 요소가 마운트 해제되고 ref가 변경될 때마다 이전 참조가 null을 인수로 호출됩니다. 이렇게 하면 두 번째 예제와 같이 인스턴스가 저장된 경우 메모리 누수가 방지됩니다. 또한 여기에 있는 예제와 같이 인라인 함수 표현식이 있는 참조를 작성할 때 React는 매 번 업데이트할 때마다 다른 함수 개체를 보게 되므로 ref는 구성 요소 인스턴스를 사용 하 여 호출 되기 직전에 null로 호출 됩니다.

제출시 텍스트 값을 업데이트하는 입력 필드의 실행 예제로 돌아가기: 위의 예제에서는 2개의 매개 변수를 제공하는 React.forwardRef() 매개 변수를 제공합니다. 우리가 전달하는 심판에 대해. 참조의 현재 특성에 액세스하여 렌더 메서드에서 생성된 참조 노드를 “참조”할 수 있습니다. 위의 예에서, 그것은 이것.exampleRef.current. 참조는 반응형 소품 및 상태를 스트리밍하여 불편하게 하는 방식으로 특정 자식 인스턴스에 메시지를 보낼 수 있는 좋은 방법입니다. 그러나 응용 프로그램을 통해 데이터를 흐르는 추상화가 아니어야 합니다. 기본적으로 반응성 데이터 흐름을 사용하고 기본적으로 반응성이 없는 사용 사례에 대해 참조를 저장합니다. 마지막으로, 참조를 사용 하 여 하지만 이시간 상위 순서 구성 요소 (HOC)를 사용 하 여 다른 예제를 살펴보겠습니다. react docs에 따르면 refs는 DOM(문서 개체 모델) 노드 또는 React 응용 프로그램의 구성 요소 인스턴스( 즉, 참조가 참조하는 노드를 반환하는 인스턴스)에 대한 참조를 얻는 데 사용됩니다. 예제와 함께 볼 수 있습니다. React 16.3 이상을 사용하는 경우 이러한 경우 참조 전달을 사용하는 것이 좋습니다. 참조 전달을 사용하면 구성 요소가 자식 구성 요소의 참조를 자체 참조로 노출하도록 선택할 수 있습니다.

참조 전달 문서에서 하위 DOM 노드를 상위 구성 요소에 노출하는 방법에 대한 자세한 예제를 찾을 수 있습니다. 전체 예제를 보려면 아래 코드를 살펴보십시오: 현재 React에서 refs를 사용하는 3가지 뚜렷한 방법이 있습니다. 참조를 사용하면 기본 DOM 요소에 액세스할 수 있습니다. 이 기능은 DOM 요소가 필요한 라이브러리와 인터페이싱할 때 특히 유용합니다. 이 예는 div 내에서 애니메이션을 렌더링하려는 three.js입니다. 참조의 또 다른 용도는 사용자가 양식 입력 요소에 입력한 vaue를 잡으려는 경우입니다. 아래에서 참조를 사용할 수 있는 3가지 방법을 다룹니다. react에서 렌더()와 함께 Refs와 같은 수명 주기 메서드도 존재하므로 React 내에서 직접 DOM 노드에 액세스할 수 있습니다.

이는 한 가지 예에서 구성 요소의 자식을 변경하려는 경우에 유용합니다. 요소의 값을 변경하되 소품을 사용하거나 전체 구성 요소를 다시 렌더링하지 않고 변경한다고 가정해 보겠습니다. 현재 React의 기능 구성 요소에 참조를 연결할 수 없습니다. 다음 예제에서는 myRef가 인식되지 않고 오류가 발생합니다: 문자열 참조는 단순히 원하는 요소에 참조 프로구슬을 추가하여 참조에 대한 문자열 이름을 해당 값으로 전달하여 만들어집니다. 다음은 간단한 예입니다: 아래 예제에서는 ref 콜백을 사용하여 인스턴스 속성에 DOM 노드에 대한 참조를 저장합니다. 참조와 관련된 다른 문제 외에도 제어된 입력보다 더 많은 상용구/유지 관리가 필요합니다. 예를 들어, 단일 onChange 처리기를 정의하여 모든 필드에 대해 값을 사용하여 상태를 설정할 수 있습니다. 을 사용해 렌더()에서 반환된 구성 요소 인스턴스에 대한 메서드를 호출합니다.