[React] Ref로 DOM 다루기 & Form 다루기

📌 useRef()로 DOM 다루기

Input Element가 있고 화면이 뜨자마자 focus를 주고 싶다면 useRef() hook을 사용하면 된다.

왜 document.querySelector 류를 사용하지 않고 useRef라는 별도의 방법을 제공할까?

Vanilla JS 같은 경우는 document.get ~ / document.query ~
React 같은 경우는 useRef / ref을 사용한다.

태그에 ref props로 넘겨주고 current로 접근하여 사용할 수 있다.

 

📌 Form 다루기

preventDefault로 submit을 하면 새로고침되는 기본 동작을 없애준다.

그리고 console의 dir을 사용해 target의 elements 모든 속성을 확인해봄으로써 form에 접근할 수 있었다.

console.dir() - Web APIs | MDN

React에서는 for 대신 htmlFor 사용, value 대신 defaultValue 사용

 

 

다른 예제로 validation, value을 사용해 유효한 숫자로 시작하는지 input의 값을 확인할 것이다. 

phoneNumber의 길이가 0이고, message가 유효하지 않다고 하면 button을 disabled 시켜줌으로써 제출하지 못하게 만들어 준다. 그리고 0으로 시작할 때만 입력이 가능하게 하며 useState로 상태를 변경해준다.