React _ useRef

React _ useRef 공부하기.

(코드 내용은 useState와 이어짐.)

 

useRef.

용도 1. React Hooks중 하나로 javascript의 getElementById querySelector와 같이

특정 DOM을 직접 선택하기 위해 사용하는 함수. (외부 라이브러리 사용시 유용)

class형 컴포넌트에서는 콜백함수 혹은 React.createRef 사용.

용도 2. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리.

useRef로 관리하는 변수는 값이 바뀐다고해서 컴포넌트가 리렌더링되지 않는다.

 

 

용도1 연습.

초기화 버튼 클릭시 초기화 버튼에 포커스가 남아있는데,

초기화 이후 input에 포커스가 잡히도록 구현.

 

코드