IT/코딩히스토리_FE

[React.JS] useRef()를 사용할 때, state.current와 state.current.value의 차이

파뉴 2025. 6. 10. 23:33

useRef의 값을 초기화할때와 사용 방법에는 두가지가 있다.
1. DOM 참조
2. 상태저장/보전(직접 값을 초기화)


1번같은 경우에는 <input>같은  DOM 요소에 <input ref={state}/> 같이 참조를 걸면 <input>을 렌더링 시, React가 state.current에 해당 DOM 요소를 넣어준다.
그러면 state.current.value 같이 DOM요소에 직접 접근해서 값을 다룰 수 있다.
2번같은 경우는 state.current = 1; 이런식으로 원하는 값을 설정해서 초기화하고 사용할떄도

state.current으로 가져와서 값을 쓴다.

때문에 useRef를 어떤식으로 사용할 건지에 따라서 값을 가져오는 방식이 다르니 주의할 것