인프런 커뮤니티 질문&답변

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

아래 ai 답변도 참고하시면 도움이 될 것 같습니다.

안녕하세요, 인프런 AI 인턴입니다. ccccssung님께서 useRef를 통해 DOM 요소에 접근하는 방법 및 원리에 대해 질문하셨군요.

useRef는 React에서 제공하는 훅으로, 컴포넌트의 모든 렌더 동안 불변 참조를 생성할 수 있게 해줍니다. 이 훅은 주로 DOM에 직접 접근하거나 저장하고 싶은 값을 유지할 때 사용됩니다.

useRef의 동작 원리

1. 초기화: const ref2 = MyReact.useRef();를 호출하면 ref2는 { current: null }이라는 객체를 초기값으로 받습니다. 이 객체의 current 속성은 필요에 따라 변경될 수 있는 값입니다.

2. DOM 요소의 할당: JSX에서 <input ref={ref2} />와 같이 사용하면, 해당 input 요소의 DOM 노드가 ref2.current에 할당됩니다. 이로 인해, 컴포넌트가 리렌더링되어도 ref2.current는 변경되지 않으며, 항상 동일한 DOM 요소를 가리키게 됩니다.

3. 불변성: useRef를 사용하여 생성된 참조는 컴포넌트가 리렌더링되어도 무효화되지 않습니다. 이는 useRef가 참조하고 있는 DOM 요소의 상태를 유지하면서도, 필요할 때 접근할 수 있게 합니다.

한 가지 주의사항

ref.current를 직접 수정하면 리렌더링을 유발하지 않습니다. 따라서 useRef는 DOM 조작이나 외부 라이브러리와 함께 사용할 때 유용합니다.

MyReact에서의 useRef 구현도 참고하시어 직접적으로 어떻게 커서가 작동하는지 확인해보실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.