리액트에서 Ref를 활용한 DOM 요소 가져오기

원래 getElementbyId로 데이터를 가져오고 카드에 하나씩 넣을때 appendChild해서 넣었었다

=> 근데 이 두개는 진짜 가상DOM이 아닌 진짜 DOM을 건드렸었던 것이니다

클래스형 컴포넌트는 app.js에서 다 만들어줬었다.

 

//App.js

constructor(props) {
    super(props); //부모클래스에 있는걸 가져오기(React.Component)
    //내상태값(내 컴포넌트가 갖고 있는 데이터), App이라는 클래스형 컴포넌트는 
    //지금 State라는 데이터를 나를 이 App이라는 클래스안에다가 넣어놓기
    this.state = {
      list: ["영화관가기", "매일 책 읽기", "수영 배우기"],
    };

    //Ref를 어디에 넣어줄지 정해주는것은 이부분(React.createRef()이 메소드가 클래스형 컴포넌트에서 사용하는것)
    this.text = React.createRef(); 
  }

어떻게 해서 리액트 요소를 가지고 올수있는가, Ref를 써서 DOM 요소를 가지고 올 수 있습니다.

//App.js

<div>
  <input type="text" ref={this.text}/>
</div>

이렇게 App에 새로 만들어주고

 

마운트가 된 상태에서는 이 DOM 요소를 찾을수 있고
onChange()에있는 화살표 함수가 실행이 될 무렵에는 this.text.current에 이미 input이있음 -> 그러면 우리가 input의 값을 확인할때마다
onChange에 넣어줘야 하냐는 꼭 그런건아니다(수많은 방법중에 하나)

 

onChange는 이 input에 있는 어떤 값이 변했을때 호출이 됨 -> 그러면 밑에 console.log(this.text.current.value);가 실행

 

여기까지가 class형 컴포넌트에서 리액트에서 dom요소를가져올때였고

 

이제는 함수형 컴포넌트에서 리액트에서 dom요소를 가져올때(일단 라이프 사이클 메소드를 사용할 수 없음)
BucketList.js에서 만들어줌

 

클래스형 컴포넌트 안에서 뭔가를 초기화할수 없다는 뜻
함수형 컴포넌트 안에서는 Ref를 만들때 리액트 훅이라는 친구를 쓰면 됨

 

순서대로 과정을 적어보자면

//BucketList.js


//1. 어떤 요소에다가 Ref요소를 넣을지 선택
//2. 변수만들기
const my_wrap = React.useRef(); //useRef()안에 들어갈 parameter는 가장 초기값(맨 처음 초기화 해줄값을 여기에 넣어줌)
//과제에서는 null을 넣어줌
const my_wrap = React.useRef(null);
//3. 그리고 return에 해당 Ref요소 넣을 곳에 ref={my_wrap}으로 넣어줌
//이부분!!!!!!!!!!!!!!!!!
return (
    <div ref={my_wrap}>	
      {
        //js의 내장 함수 중 하나인 map입니다. 리스트의 갯수만큼 => 오른쪽 구문을 반복해요.
        // 자세한 사용법은 아래 링크를 확인해주세요.
        // https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
        my_lists.map((list, index) => {
          // 콘솔을 확인해봅시다 :)
          //console.log(list);
          return <ItemStyle key={index}>{list}</ItemStyle>;
        })
      }
    </div>
  );
};

BucketList.js에

//두번째 인자만큼의 시간(ms기준)이 흐른후에 첫번째 인자로 넘겨준 함수를 실행하라(1000이면 1초)
  window.setTimeout(() => {
    console.log(my_wrap);
  }, 1000);

마지막 결과값 

//App.js

import React from "react";
import BucketList from "./BucketList";
import "./style.css";
import styled from "styled-components";

class App extends React.Component {
  constructor(props) {
    super(props); //부모클래스에 있는걸 가져오기(React.Component)
    //내상태값(내 컴포넌트가 갖고 있는 데이터), App이라는 클래스형 컴포넌트는 지금 State라는 데이터를 나를 이 App이라는 클래스안에다가 넣어놓기
    this.state = {
      list: ["영화관가기", "매일 책 읽기", "수영 배우기"],
    };

    //Ref를 어디에 넣어줄지 정해주는거
    this.text = React.createRef();
  }

  //Ref 확인
  componentDidMount() {
    console.log(this.text.current.value);
  }

  render() {
    //console.log(this.state.list);
    //리액트 요소 갖다붙이기
    return (
      //넘겨줄때 변수명주고, list_a는 props명이 되어지는거고, 넘겨지는 데이터는 this.state.list
      <div className="App">
        <Container>
          <Title>내 버킷리스트</Title>
          <Line />
          <BucketList list_a={this.state.list} />
        </Container>

        <div>
          <input
            type="text"
            ref={this.text}
            onChange={() => {
              console.log(this.text.current.value);
            }}
          />
        </div>
      </div>
    );
  }
}



const Container = styled.div`
  background-color: #fff;
  width: 50vw;
  max-width: 350px;
  margin: auto;
  height: 80vh;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
`;

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

const Line = styled.hr`
  margin: 16px 0px;
`;

export default App;

// BucketList.js


// 리액트 패키지를 불러옵니다.
import React from "react";
import styled from "styled-components";

// 함수형 컴포넌트는 이렇게 쓸 수도 있고
// function Bucketlist(props){
// return (
// <div>버킷 리스트</div>
// );
// }

// 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요.
// 저희는 앞으로 화살표 함수를 사용할거예요.
// 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.
// js 함수가 값을 받아오는 것과 똑같이 받아오네요.
// {list : 어떤 값은 받아온 것!}, App.js에서 <BucketList list={this.state.list}/> 보낸 값이 바로 밑에 들어감
//props로 말고 바로 {list} 형태로 가져오는것, js 함수가 값을 받아오는것과 같음
//또는 그냥 props하고 const my_lists = props.list로 가져와도됨
const BucketList = ({ list_a }) => {
  // Quiz 1: my_list에 ['a', 'b', 'c'] 대신 부모 컴포넌트가 넘겨준 값을 넣으려면 어떻게 해야할까요?
  const my_lists = list_a;
  const my_wrap = React.useRef(null);

  // console.log(my_wrap);
  //두번째 인자만큼의 시간(ms기준)이 흐른후에 첫번째 인자로 넘겨준 함수를 실행하라(1000이면 1초)
  window.setTimeout(() => {
    console.log(my_wrap);
  }, 1000);
  // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
  return (
    <div ref={my_wrap}>
      {
        // js의 내장 함수 중 하나인 map입니다. 리스트의 갯수만큼 => 오른쪽 구문을 반복해요.
        // 자세한 사용법은 아래 링크를 확인해주세요.
        // https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
        my_lists.map((list, index) => {
          // 콘솔을 확인해봅시다 :)
          //console.log(list);
          return <ItemStyle key={index}>{list}</ItemStyle>;
        })
      }
    </div>
  );
};

// 우리가 만든 함수형 컴포넌트를 export 해줍니다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요.
export default BucketList;

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