React hooks 리액트 훅 useRef란?

React hooks 리액트 훅 useRef란?

 

오늘은 리액트의 중요한 훅 중 하나인 useRef를 배워보려 합니다.

useRef라는 훅은 다른 useState 혹은 useEffect보다는 사용 빈도가 낮은 것 같습니다.

저 역시 리액트를 이용하면서 useRef를 사용해본 적이 정말 손에 꼽을 정도로 적은 것 같습니다.

하지만 당연히 알고 사용하는 것과 모르고 사용하지 못하는 것은 정말 다를 것입니다.

오늘은 가볍게 useRef에 관해서 알아보겠습니다.

 

1. useRef 사용 방법.
2. 마무리.

 

1. useRef 사용 방법.

 

아래의 코드를 설명해드리겠습니다.

 

Click me 버튼을 누르면 isRef는 현재의 boolean값의 반대 값을 가지게 됩니다.

즉 기본 값이 false 이면 true, true 이면 false가 됩니다.

그리고 isRef값이 true가 되면 ActiveRef라는 JSX를 통해서 input tag이 렌더 되며,

useEffect를 통해 isRef값이 변경될 때마다 로그가 생성됩니다.

 

ref는 input tag뿐만 아닌 다른 tag도 가능합니다.

또한. current를 이용하여 tag를 이용할 수 있습니다.

예 ) refElement.current 

 

아래의  코드는 

{isRef ? <ActiveRef /> : null}

이와 같이 변경하실 수 있습니다.

{isRef && <ActiveRef />}

 

 

import { useRef, useState, useEffect } from 'react';

const App = () => {
  const refElement = useRef<HTMLInputElement>(null);
  const [isRef, setIsRef] = useState(false);

  useEffect(() => console.log(refElement.current), [isRef]);

  const ActiveRef = () => (
    <div>
      <input type='text' ref={refElement} />
    </div>
  );

  const activeIsRef = () => setIsRef(!isRef);

  return (
    <div>
      <button onClick={activeIsRef}>Click me</button>
      {isRef ? <ActiveRef /> : null}
    </div>
  );
};

export default App;

 

2. 마무리.

앞에도 언급했듯이 useRef는  useState 혹은 useEffect에 비해 적게 사용되는 것 같습니다.

하지만 당연히 사용할 줄 아는것이 중요합니다.

useRef는 javascript에  document.getElementById()와 같이 사용 할 수 있습니다.

 

오늘은 가볍게 useRef에 관해서 알아보았습니다.

useRef가 비교적 적게 사용된다는 것이지, 사용되지 않는다는 것은 아닙니다.

꼭 사용 방법을 숙지해두시기 바랍니다.

 

오늘도 열심히 미래를 준비하시는 모습이 정말 멋집니다.

하루하루 크게 다를 것 없는 하루 같지만 언젠가 뒤돌아보면 예전보다 나아진 자신을 발견할 것입니다.

오늘도 내일도 파이팅입니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.
Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.