Ref - React

1. Ref란?

 - 영어 Reference(참조)의 축약형으로 다른 DOM에 접근 가능하게 해준다.

 - 그 값은 Object이고 오브젝트 안에는 current가 존재하고 그 안에 값이 존재한다.

 

 

2. 사용이유?

 - useState와 비슷한 기능을 하지만 좀 더 간단한 코드의 구조를 가진다.

 - onChange의 input의 값을 구한다 했을 때 state를 사용하면 값이 바뀔때 마다 값이 변한다.

 - ref를 이용하면 제출될 때에만 값이 변하도록 조정 가능하다.

 

3. 사용 방법

 (1). React에서 ref import해준다.

 

import React, { useRef } from 'react';

 

 (2). ref를 정의해준다.

 

 const nameRef = useRef();
 const ageRef = useRef();

 

 (3). input에 ref를 전달한다.

 

<label>Username</label>
<input type='text' ref={nameRef} />
<label>Age (Years)</label>
<input type='text' ref={ageRef} />

 

 (4). 편리를 위해서 ref값의 value를 따로 정의 해준다.

 

const enteredUserName = nameRef.current.value;
const enteredUserAge = ageRef.current.value;

 

 (5). Ref를 사용하면 일반 JavaScript처럼 값에 접근이 가능하다.

 

    nameRef.current.value = '';
    ageRef.current.value = '';

 

다만 리엑트에서는 리엑트로만 이용해주는게 Best

일반적으로 사용되지 않는 방법이고 form의 값초기화 같이 간단한 용도로만 쓰는 것이 좋다.

 

4. 사용 결과

 

 (1). useState를 사용했을 때

useState사용 => onChange 함수 생성 => 값이 바뀌면 set에 새로운 값 지정 => input에 현재값 value지정 => 사용

 

 (2). ref를 사용했을때

useRef사용 => input에 ref지정 => 사용