REACT_Ref

Ref 는 Reference 의 약자로 '참조' 를 뜻한다

react에서 element의 값을 걷거나 수정할 때 보통 javascript나 jquery를 사용한다

이때 , id나 class와 같은 속성으로 element에 접근한다 

Ref를 사용하면 element가 참조하는 변수에 접근해 변경하고 element를 제어할 수 있다 

 

- RefFocus 함수와  JavascriptFocus 함수는 동일하게 동작한다

input 박스에 focus 이벤트로 테두리를 굵게 처리한다

 

- R073_ReactRef.js

import React, { Component } from 'react';

class R073_ReactRef extends Component {
  constructor(props) {
    super(props);
    this.InputRef = React.createRef();
  }

  RefFocus = (e) => {
    this.InputRef.current.focus();
  }

  JavascriptFocus() {
    document.getElementById('id').focus();
  }

  render() {
    return (
      <>
        <input id="id" type="text" ref={this.InputRef} />
        <input type="button" value="Ref Focus" onClick={this.RefFocus}/>
        <input type="button" value="Javascript Focus" onClick={this.JavascriptFocus}/>
      </>  
    )
  }
}

export default R073_ReactRef;

 

- App.js

import React from 'react';
//import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactRef from './R073_ReactRef'
//import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <ReactRef/>
    </div>
  );
}

export default App;

 

결과

버튼을 누르면 input 박스 테두리가 굵게 변한다