[Legacy][React] useRef, ref

[React] useRef, ref 란 무엇일까?

React에서 제공하는 hook, useRef에 대해서 알아보자. (전체적인 코드는 작성하지 않음, 해당 git 링크에서 clone 받아서 확인 가능)

useRef

useRef는 무엇이고 왜 사용할까? 자세히 들어가면 한도 끝도 없고, 그 정도까지 알 필요도 없다(심화는 천천히). 간단하게만 알아보자. ref는 크게 2가지로 사용이 된다.

• 1. DOM에 접근한다.
• 2. 렌더링을 일으키지 않고 값을 변경시킨다.

우선 위 2가지를 알아보자.

1. DOM에 접근한다.

JavaScript에서 DOM에 접근할 때 사용하는 여러가지 방법이 있다. DOM에 접근하는 대표적인 방법이 Document.querySelector(), Document.getElementById()가 있다. 이러한 것들을 대신 ref을 이용하여 DOM에 접근할 수 있다. 간단하게 예시를 들어보자. 아래 코드는 버튼을 클릭하였을 때, input 창에 focus를 하는 코드이다.

 return (
    <div>
      <input ref={textRef} />
      <button onClick={() => textRef.current.focus()}>
        input에 포커스하기
      </button>
    </div>
  );

결과를 보면 알 수 있듯이 input 창에 포커싱이 된다.

 

2. 렌더링을 일으키지 않고 값을 변경시킨다.

렌더링을 일으키지 않고 값을 변화시킬 수 있다? 이게 무슨 말일까? 이전 시간에 알아본 state는 값이 변할 때마다 setState를 해주어서 렌더링이 되는 것을 확인하였다. 그러나 ref는 state와 다르게 값이 변하게 되어도 렌더링이 일어나지 않는다. 간단하게 구현하여 확인해보자.

const Ref = () => {
  const textRef = useRef(null);

  console.log("rendering");

  return (
    <div>
      <input ref={textRef} />
      <button onClick={() => console.log("input 값 : ", textRef.current.value)}>
        값 확인하기
      </button>
    </div>
  );
};

 

위 gif를 보면 알 수 있듯이 input에 값을 계속 변화를 주지만 렌더링은 일어나지 않는다. 그럼 저 값을 가지고 오고 싶으면 어떻게 해야할까? 바로 ref.current를 이용하여 DOM에 접근하여 값을 가지고 오는 것이다. 사실 1번 DOM에 접근할 수 있다와 연관이 있는 내용이다.

Controlled(제어) 컴포넌트, Uncontrolled(비제어) 컴포넌트

React에는 제어 컴포넌트와 비제어 컴포넌트가 있다. 간단하게 2개의 차이만 말하자면 제어 컴포넌트는 state를 사용한 것이고, 비제어 컴포넌트는 ref를 사용한 것이다. 2개의 차이점은 분명히 존재한다. React에서는 제어 컴포넌트를 지향하고 있다. 그러나 state를 사용하는 경우 복잡한 form을 구현할 때, 렌더링이 많이 일어나 성능상 느려지는 경우가 발생할 수 있다. 따라서 제어, 비제어 컴포넌트를 상황에 맞게 잘 사용해야 한다. 해당 부분은 아래 걸어둔 React 공식 홈페이지 링크를 읽어보도록 하자.

• - 제어 컴포넌트
• - 비제어 컴포넌트

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.