[React 기본] Ref 사용하기 (document.getElementById 대신에 사용하는 것 ! ref)

기본 선언하기 React.createRef()

 

vue에서도 자주 사용하는 ref 가 react에도 동일하게 있는데, 선언하는 방식이 조금 달랐다.
1. 원하는ref이름 = React.createRef() 로 원하는 이름을 선언한 후
2. input 태그에 ref={this.원하는ref이름} 이렇게 쓰면 된다.

 

---

console.log로 찍어보기

 

그러고나서 input의 value값을 가져오려고 console.log를 찍어보았다.
그랬더니 current라는 객체를 가지고 있었다.

 

console.log를 찍으니 나오는 값

console.log를 찍으니 나오는 값

current를 펼치니 나오는 값

current를 열었더니 나오는 값

 

 

 

---

가져온 값으로 form submit이벤트 완성하기 this.inputRef.current.value

 

submit할때 input의 value값을 this.inputRef.current.value를 통해 가져올 수 있었다.

*추가적으로 form에 ref를 걸어 확인했더니 reset()이라는 함수가 있어 form submit후
this.formRef.current.reset() 으로 인풋창을 리셋시키는 것도 가능하였다.

 

---

공식문서 주소
https://ko.reactjs.org/docs/refs-and-the-dom.html

Ref와 DOM – React