useRef는 영구적인 변경 가능한 참조를 생성하기 위한 React Hook입니다. 이는 변경 시 리렌더링을 트리거하지 않는 값을 저장할 수 있게 해줍니다. 일반적인 용도로는 DOM 요소에 직접 접근하여 입력 필드에 포커스를 맞추는 등의 작업을 수행할 수 있습니다.사용하려면 React에서 useRef를 가져와 값으로 초기화합니다. 참조 객체는 저장된 값이나 DOM 노드를 보유하는 'current' 속성을 가집니다. useState와 달리 ref.current를 수정해도 컴포넌트가 리렌더링되지 않습니다.useState는 UI에 영향을 미치고 업데이트 시 리렌더링을 유발하는 상태를 관리하기 위한 것입니다. 반면에 useRef는 타이머 ID나 DOM 참조와 같이 UI 업데이트 없이 렌더링 간에 지속되어야 하는 값에 이상적입니다. 예를 들어, useState 변수를 변경하면 리렌더링이 트리거되지만, useRef.current를 업데이트해도 그렇지 않습니다.DOM 요소에 접근하려면 'ref' 속성을 사용하여 해당 요소에 ref를 연결합니다. 렌더링 후 ref.current는 실제 DOM 노드를 가리키며 직접적인 상호 작용을 허용합니다. 이는 TV와 직접 상호 작용하는 리모컨과 유사합니다.useRef의 핵심은 항상 .current 속성을 통해 해당 값에 접근하는 것입니다. .current를 변경하면 값이 변경되지만 React는 자동으로 리렌더링하지 않습니다. 따라서 useRef는 리렌더링을 트리거하지 않고 "값을 기억"하고 "참조에 접근"하는 방법으로 이해하는 것이 가장 좋습니다.주요 차이점은 동작 방식에 있습니다. useState 변경은 리렌더링 및 UI 업데이트로 이어지는 반면, useRef 변경은 그렇지 않습니다. 이 차이를 이해하는 것은 React 애플리케이션에서 useRef를 효과적으로 사용하는 데 중요합니다.
useState변수를 변경하면 리렌더링이 트리거되지만,useRef.current를 업데이트해도 그렇지 않습니다.DOM 요소에 접근하려면 'ref' 속성을 사용하여 해당 요소에 ref를 연결합니다. 렌더링 후 ref.current는 실제 DOM 노드를 가리키며 직접적인 상호 작용을 허용합니다. 이는 TV와 직접 상호 작용하는 리모컨과 유사합니다.useRef의 핵심은 항상.current속성을 통해 해당 값에 접근하는 것입니다..current를 변경하면 값이 변경되지만 React는 자동으로 리렌더링하지 않습니다. 따라서 useRef는 리렌더링을 트리거하지 않고 "값을 기억"하고 "참조에 접근"하는 방법으로 이해하는 것이 가장 좋습니다.주요 차이점은 동작 방식에 있습니다. useState 변경은 리렌더링 및 UI 업데이트로 이어지는 반면, useRef 변경은 그렇지 않습니다. 이 차이를 이해하는 것은 React 애플리케이션에서 useRef를 효과적으로 사용하는 데 중요합니다.