8. Ref! 리액트에서 돔요소 가져오기

내가 어떤 인풋박스에서 텍스트를 가져오고 싶으면, 어떻게 접근해야 할까?

render()가 끝나고? mount가 끝나고? 아니면 그 전에 가상DOM에서? 아니면 DOM에서?


정답은 리액트요소에서 가져온다!

React.createRef()를 이용해서 text값 가져오기!

클래스형

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(
    	<div className = "App">
          <div>
            <BucketList list = {this.state.list} />
          </div>
          <div>
            <input type="text" ref={this.text}/>
          </div>
      	</div>
      )
    }
          
export default App;

훅

import React from "react";
import styled from "styled-components";


const BucketList = ({ list }) => {

  const my_lists = list;
  const my_wrap = React.useRef(null);

  window.setTimeout(() => { // 1초 뒤에는?!
    console.log(my_wrap);
  }, 1000);


  
  return (
    <div ref={my_wrap}>
      {my_lists.map((list, index) => {
        return 
        <ItemStyle key={index}>
        	{list}
        </ItemStyle>;
      })}
    </div>
  );
};




const ItemStyle = styled.div`
  padding: 16px;
  margin: 8px;
  background-color: aliceblue;
`;

export default BucketList;