리액트에서 돔요소를 가져오는 방법 (Ref)

예를들어, 어떤 인풋박스에서 텍스트를 가져오고싶을경우 "리액트 요소"에서 가져와서 사용한다.

 

React 요소를 가지고 오는 방법 React.createRef()

 

import React from "react"; import logo from "./logo.svg"; // BucketList 컴포넌트를 import // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from "./BucketList"; import styled from "styled-components"; // 클래스형 컴포넌트 형태! class App extends React.Component {     constructor(props) {     super(props); // App 컴포넌트의 state를 정의해준다.     this.state = {        list: ["영화관 가기", "매일 책읽기", "수영 배우기"], }; // ref는 이렇게 선언! this.text = React.createRef(); } componentDidMount(){ // 콘솔에서 확인!     console.log(this.text);     console.log(this.text.current); } // 랜더 함수 안에 리액트 엘리먼트를 넣어준다.!  render() {    return (   {/* 컴포넌트를 넣어줍니다. */} {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}        <div className="App">          <Container>          <Title>내 버킷리스트</Title>           <Line /> {/* 컴포넌트를 넣어줍니다. */} {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}           <BucketList list={this.state.list} />           </Container>           <div>              <input type="text" ref={this.text}/>           </div>       </div>    );  } } const Container = styled.div`      max-width: 350px;      min-height: 80vh;      background-color: #fff;      padding: 16px;      margin: 20px auto;      border-radius: 5px;      border: 1px solid #ddd; `; const Title = styled.h1`       color: slateblue;       text-align: center; `; const Line = styled.hr`       margin: 16px 0px;       border: 1px dotted #ddd; `; export default App;

 

우선은 ref 를 어떻게 선언하고 돔요소를 어떻게 가져오는지 형태 정도만 알고있자!

좀더 자세한 부분은 나중에 더 공부 하도록 하자.