React에서 useRef Hook을 사용하는 실제 예

useRefReact 의 hook에 대한 간단한 설명 입니다.

이 기사에서는 일부 개발자, 특히 새로운 개발자와 React를 혼동하는 주제에 대해 설명합니다.

이 후크가 어떻게 작동하는지 명확하지 않은 경우 useRef의 후크를 사용하시겠습니까? 언제 사용해야 하나요? 이 기사는 당신에게 도움이 될 것입니다.

useRef 후크

는 useRef인수를 취하고 속성 객체를 반환 할 수있는 기능이다 current할당 된 값.

해당 값을 변경하려면 어떻게 합니까? 마찬가지로 쓰기 다음 val.current = “bar"때문 값은 변화한다 useRef, 변경 가능한 이 값도 노드 값으로 DOM 요소에 할당 될 수 있음을 의미한다.

이제 값 var.current이 변경되었지만 구성 요소는 여전히 동일할 것입니다. 이는 useRef구성 요소를 다시 렌더링하지 않지만 의 값을 인쇄하기 때문입니다 var.current.

값이 변경되었지만 구성 요소에 반영되지 않습니다. 이것은 컴포넌트를 다시 렌더링하지 않고도 DOM 요소의 컴포넌트 또는 속성 값을 변경할 수 있기 때문에 편리한 기능입니다.

DOM의 요소에 액세스

가장 일반적인 사용 방법 useRef은 DOM 요소에 액세스하는 것입니다. 이를 수행하는 방법 ref은 DOM 요소에 속성을 추가하는 것 입니다.

이렇게 하면 with 의 요소를 val.current가져오는 것과 같은 방식으로 요소에 액세스 하고 속성을 변경할 수 있습니다 getElementById.

위의 코드에서 클릭 이벤트가 발생하면 텍스트를 'Hola Mundo'로 변경하고 배경을 빨간색으로 변경하는 기능을 트리거하는 버튼을 추가했습니다.

요소를 다시 렌더링하지 않고 완벽하게 작동합니다.

결론

useRef후크, 당신이 볼 수 있으므로, 우리의 응용 프로그램의 성능과 상호 작용을 향상시키기 위해 구성 요소의 복잡한 동작을 수행 할 수 있습니다. 이 기사가 유용했기를 바랍니다. 읽어주셔서 감사합니다.

더 알아보기