userRef와 let 선언 차이

Question

강의 마지막 부분에서 let 으로 count 선언 후, App.jsx에서 <Register/> 를 두 번 호출하면 같은 변수를 쓰면서 같은 Register 함수를 호출하는 것이라 하셨는데

useRef로 선언해도 같은 Register함수를 호출하는 것 아닌가요 ?

useRef를 사용하면 const inputRef 로 선언해도 다른 객체로 인식 하는 건지 ..! 궁금합니다.

이정환 Winterlood · Answer

안녕하세요 이정환입니다.

useRef로 선언된 변수는 "전역 스코프에 let으로 선언된 변수"와 다르게 컴포넌트 별로 생성되고 유지됩니다. 따라서 두번 호출된 <Register> 컴포넌트가 각각 useRef로 선언된 변수를 따로 갖게 됩니다. 별도의 공간에 생성되는 변수를 만든다고 이해하시면 될 것 같아요

이해가 잘 안되는 부분이 있으시다면 추가적으로 질문 주세요 😃

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 한나님.

useRef와 일반 변수(let이나 const) 사이의 차이에 대해 궁금해하시니 관련된 내용을 설명드리겠습니다.

let 선언과 useRef의 차이:
- let으로 변수를 선언하면 그 변수는 해당 함수가 다시 호출될 때마다 초기화됩니다. 이는 리액트 컴포넌트가 리렌더링할 때마다 해당 변수가 초기 값으로 돌아간다는 것을 의미합니다.
- 반면, useRef는 컴포넌트의 렌더링 동안 유지되는 객체를 제공합니다. useRef로 선언한 변수는 컴포넌트가 리렌더링 되어도 값이 초기화되지 않고 유지됩니다. 즉, 한 번 할당된 값이 계속 유지되므로 DOM 변경이나 비슷한 작업을 수행할 때 유용합니다.
useRef로의 객체 관리:
- useRef는 컴포넌트가 마운트(화면에 처음 렌더링)된 이후에도 계속해서 같은 ref 객체를 유지합니다. 그래서 useRef로 선언된 변수는 증가나 상태 유지 등의 기능을 할 때 각기 다른 컴포넌트 인스턴스마다 고유한 값을 가질 수 있습니다.
Register 컴포넌트 예시:
- Register 컴포넌트를 두 번 호출할 때, useRef로 선언된 변수들이 각각 다른 ref 객체로 관리되기 때문에 let으로 선언했을 때와는 다르게 각각의 인스턴스 내에서 상태를 유지할 수 있습니다.

이와 관련된 자세한 설명은 아래의 기존 질문을 참고하시기 바랍니다:
- useRef와 변수의 차이

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

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

userRef와 let 선언 차이