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

Ref

 

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

DOM에서 다루는 방법은 1주차에 배웠는데, 리액트에선 어떻게 하면 좋을까요?

(render()가 끝나고 가져오면 될까요? 아니면 mount가 끝나고?

아니, 그 전에 가상돔에서 가져오나? 아니면 DOM에서? 😖)

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

 

1) React 요소를 가지고 오는 방법 1 -> 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);
    console.log(this.text.current.value);
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {
    
    return (
      <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;

 

2) React 요소를 가지고 오는 방법 2 -> React.useRef() <- 함수형 컴포넌트

 

useRef()는 리액트 훅 중 하나예요. 리액트 훅은 사용방법이 무지무지 간단합니다!

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

const BucketList = ({ list }) => {
  const my_lists = list;
  const my_wrap = React.useRef(null);
  // null로 초깃값을 설정 해줌

  console.log(my_wrap); // 콘솔로 확인해봐요!

  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;

---

+ 추가사항

 

REF란

: Reference, 참조라고 합니다.

 

 render 메서드에서 생성된 DOM 노드나 React 엘리먼트(요소)에 접근하는 방법을 제공합니다.

자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다.

 

그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다.

그런 경우 REF를 사용합니다.

 

참조하고 싶은 DOM 요소나 React 엘리먼트에 ref={createRef or useRef를 담은 변수나 상수}

 

REF에는 클래스형 컴포넌트에서 사용 할 수 있는 creataeRef와 함수형 컴포넌트에서 사용 할 수 있는 useRef가 있습니다. 둘의 차이점은 아래 사이트를 보면 됩니다.

 

https://velog.io/@hoon_dev/React-Ref-%EC%9D%B4%EC%9A%A9%ED%95%98%EA%B8%B0feat-createRef

[React] Ref 이용하기(feat : createRef, useRef)