[React.JS] 리액트Hooks. useRef 정의 및 활용 (6)

* Html. Javascript, JQuery 에서, View에 존재하는 특정 돔(DOM)을 선택시

  Document.getElementById(), Document.querySelector(),

  $("#idValue"), $(".ClassValue") .. 과 같은 방법을 활용하였습니다.

 

* useRef ? 

--> 리액트에서 특정 돔을 선택할시, Hooks문법인 useRef를 사용할 수 있습니다.

(Class형 컴포넌트에서는 React.createRef() 사용)

 

---

1. UserInput.js 컴포넌트 수정

Step1. react로 부터 useRef 함수 Import..

 

Step2. useRef() 함수실행, 반환된는 useRef 객체를 변수에 할당. 

 

Step3. useRef 적용할 특정, 돔(DOM) input 태그에 ref속성추가

         --> ref={"useRef객체"} Binding..

 

Step4. 입력창 초기화 onReset() 호출시,

         useRef객체 Binding 되어있는 input태그 Focus.

 

 

 

2. App.js ( UserInput.js 렌더링 )

부모 컴포넌트 App.js 에서 UserInput.js 렌더링

 

-- 렌더링 구조

index.js

[

    ReactDOM.render( App.js )

    [

        UserInput.js

    ]

]

 

 

3. useRef 적용확인 (View)

Before Click '초기화'

 

After Click '초기화' --> Input Focus

 

초기화 버튼 누를시 onClick 실행되는 이벤트 함수 onReset() 함수실행.
useRef로 지정된, <input>태그에 Focus 확인완료.

 

 

 

---

 

*******************************

* 추가적으로 useRef는 특정 돔의 활용하는 것 이외, 리액트 컴포넌트가 리 렌더링 될 때 마다

지속적으로 "기억할 수 있는 값"을 관리하는 목적로도 사용할 수 있다.

(컴포넌트 내부에 useRef 에 의해 관리되는 값은 바뀌어도 컴포넌트가 리 렌더링 되지 않는다)

*******************************

 

4. RefEx.js 컴포넌트 생성

Step1. react로 부터 useRef 함수 Import..

 

Step2. useRef() 초기값 1 지정 nextId변수에 할당.

 

Step3. addNumber 이벤트 함수 내부에서 uesRef 활용.. 

(nextId.curret += 1을 하여도 컴포넌트가 리 렌더링X)

 

* useRef의 값은 컴포넌트에서 지속적으로 항상 기억하는 특정 값을 활용하는 것.