useRef()

React.useRef()

• 함수형 컴포넌트에서 돔 요소를 가져오는 방법이다.
• 클래스형 컴포넌트는 인스턴스를 생성 후 render 코드 블록 쪽만 리랜더링후 다시 실행한다. 하지만 함수형 컴포넌트는 함수 블록 안에 있는 모든 것을 리랜더링시 마다 다시 실행한다.
• 그래서 함수형 컴포넌트에 createRef를 사용 할 시, ref 값이 초기화 되어서 원하는 값을 얻지 못하기 떄문에, 리액트 훅인 useRef를 사용하는 것이다.
• useRef()는 쉽게 설명하면 도플갱어 박스이다. 어떤 값을 넣어주면 그 값으로 초기화된 변경 가능한 ref 객체를 반환해주기 때문! 그리고 이 값은 원본이 아니라 똑같이 생긴 다른 값이라 변경도 된다. 변경한다고 해도 리렌더링은 일어나지 않습니다.

Ref 사용 이유!

• ref를 이용하여 DOM에 접근하는 이유는 가상DOM에 접근하기 위함이다.
• id는 유일해야 하지만 컴포넌트 재사용을 한다면 중복될 가능성이 있다.
• ref는 컴포넌트 라이프 사이클 내에서 유지가 되며, 변경이 가능한 변수이며, 값이 변할 때 렌더링이 되지 않는다.
• ref는 주로 dom-element에 직접 접근하여 컴포넌트 전체 렌더링과 관계 없는 작업을 할 때 유용하게 사용된다.
  • ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다.
• id는 유일해야 하지만 컴포넌트 재사용을 한다면 중복될 가능성이 있다.

useRef 사용법

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

 

• 아래는 버튼을 클릭했을 때, ref가 부착된 리액트 요소와 인풋박스에 써있는 값을 가져오는 예이다

import styled from "styled-components";
import React from "react";
import './App.css'

const App = () => {

  //ref 선언
  const text = React.useRef();

  const getWord = () =>{
    //ref가 부착된 리액트 요소 출력
    console.log(text.current);
    //인풋박스에 써있는 값 출력
    console.log(text.current.value);
  }
  

  return (
    <div className="App">
      <Title>Ref테스트</Title>
      <Line />
      <div>
        {/*ref 부착*/}
        <input type="text" ref={text}/>
        <button onClick={getWord}>글씨 확인하기</button>
      </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;

+++ ref 배열 사용법 

• 우선 ref를 사용할 useRef 선언부에 기본값으로 빈 배열을 넣고 ref를 선언한 변수의 current의 index에 element를 하나씩 추가하면 끝!

import {useEffect, useRef} from "react";

const person = [
  {age: 17, name: "duck1"},
  {age: 20, name: "duck2"},
  {age: 23, name: "duck3"},
  {age: 16, name: "duck4"},
  {age: 67, name: "duck5"}
]
const App = () => {
  const refList = useRef([]);
  useEffect(()=>{
    // refList.current를 하나씩 출력!
    refList.current.forEach((element) => console.log(element));
  }, []);
  return (
    <>
      {person.map((item, index) => (
        <div
          key={index}
          // refList.current에 하나씩 추가하기
          ref={(element) => refList.current[index] = element}
        >
          age:{item.age} name:{item.name}
        </div>
      ))}
    </>
  )
}

export default App;