createRef()

React.createRef()

• 클래스형 컴포넌트에서 돔 요소를 가져오는 방법이다.
• componentDidMount()나 componentDidUpdate() 를 사용해서 DOM 요소에 접근할 수 있지만, Ref를 사용하면 더 리액트스럽게 DOM 요소를 가져올 수 있다.
• Ref를 이용해서 리액트 요소를 가져온다.
• 리액트 요소는 가상돔을 만들고 그 다음에 돔에 올라간다. 돔에 올라가기 전에는 아무리 자바스크립트를 이용해Document.getElementById와 같은 것을 사용해서 태그를 가지고 오려해도 돔이 아직 안그려졌으면 아무것도 가지고 올 수 없다. 리액트 요소에서 가지고오면 값이 없지는 않을 것이다! 

createRef 사용법

• Ref는 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착된다.
• ref에 .current를 붙여서 ref가 부착된 엘리먼트를 가져올 수 있고 만약 input-box같은 경우 입력된 값을 가져오려면 .current.value를 붙여서 가져올 수 있다!

import React from "react";
import styled from "styled-components";
import './App.css'
class App extends React.Component {
  constructor(props) {
    super(props);
    // ref를 선언
    this.text = React.createRef();
  }

  componentDidMount() {
    //DOM이 다 그려진 후 .current로 ref가 부착된 리액트 엘리먼트 출력
    console.log(this.text.current);
  }

  render() {

    return (
      <div className="App">
        <Title>Ref테스트</Title>
        <Line />
        <div>
          {/*ref 부착*/}
          <input type="text" ref={this.text} />
        </div>
      </div>
    );
  }
}


const Title = styled.h1`
  color: slateblue;
  text-align: center;
`;

const Line = styled.hr`
  margin: 16px 0px;
  border: 1px dotted #ddd;
`;

export default App;

• <input type="text">에 ref를 부착했으므로 콘솔창에 ref가 부착된 리액트 요소가 출력된다!

---