useRef 관련하여 질문드립니다

Question

MyReact.useRef관련하여 질문드립니다 const ref2 = MyReact.useRef(); <input ref={ref}/> 이렇게 사용하면 input태그에 접근할 수 있는데 정확히 어떤 원리로 접근 가능한건가요?? ref2는 원래 undefined값이 아닌가요?

jeonghwan · Answer

useRef()로 만든 ref2는 {current: undefined} 값이 할당됩니다. 이 값을 input의 ref 속성에 전달하는데요. react-dom 에서 제공하는 이 특별한 ref 에 의해 ref2.current 에 돔 앨리먼트가 할당되어서 접근할 수 있습니다.  아래 ai 답변도 참고하시면 도움이 될 것 같습니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. ccccssung님께서 useRef 를 통해 DOM 요소에 접근하는 방법 및 원리에 대해 질문하셨군요. useRef 는 React에서 제공하는 훅으로, 컴포넌트의 모든 렌더 동안 불변 참조를 생성할 수 있게 해줍니다. 이 훅은 주로 DOM에 직접 접근하거나 저장하고 싶은 값을 유지할 때 사용됩니다. useRef 의 동작 원리 초기화 : const ref2 = MyReact.useRef(); 를 호출하면 ref2 는 { current: null } 이라는 객체를 초기값으로 받습니다. 이 객체의 current 속성은 필요에 따라 변경될 수 있는 값입니다. DOM 요소의 할당 : JSX에서 <input ref={ref2} /> 와 같이 사용하면, 해당 input 요소의 DOM 노드가 ref2.current 에 할당됩니다. 이로 인해, 컴포넌트가 리렌더링되어도 ref2.current 는 변경되지 않으며, 항상 동일한 DOM 요소를 가리키게 됩니다. 불변성 : useRef 를 사용하여 생성된 참조는 컴포넌트가 리렌더링되어도 무효화되지 않습니다. 이는 useRef 가 참조하고 있는 DOM 요소의 상태를 유지하면서도, 필요할 때 접근할 수 있게 합니다. 한 가지 주의사항 ref.current 를 직접 수정하면 리렌더링을 유발하지 않습니다. 따라서 useRef 는 DOM 조작이나 외부 라이브러리와 함께 사용할 때 유용합니다. MyReact에서의 useRef 구현 도 참고하시어 직접적으로 어떻게 커서가 작동하는지 확인해보실 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

useRef 관련하여 질문드립니다

useRef의 동작 원리

한 가지 주의사항

`useRef`의 동작 원리