본문 바로가기

프론트앤드 수업

[React] ref로 접근하기

728x90

자바스크립트처럼 document.quertSelect로 접근이 불가능하기에 ref로 이름을 달아서 접근을 할 수 있다.
ref(reference)[참조의 줄임말] : DOM에 이름달기
1. class형태에서의 사용방법
1) ref 객체 생성
 const 이름 = React.createRef(); 으로 선언
2) DOM 요소 ref 속성으로 지정
  <input ref={this.이름} /> 으로 사용(태그안에 적으면됨)
3) DOM요소 접근
  this.이름.current / current가 input을 가지고 있음. value값이 사용가능해짐

2. 함수형 컴포넌트에서의 사용방법
1) useRef import
import { useRef } from 'react';
2) ref 객체
const 이름 = useRef();
3) DOM요소 지정
<input ref={이름} /> 클래스가 아니니 this는 붙지 않는다.
4) DOM요소 접근
이름.current

728x90
댓글