React를 한다면 무조건 알아야 할 - useRef 2편

결론: 엄청 쉬우니까 쓰자.

 

 

useRef 사용법

const ref = useRef(value)

//아래와 같은 오브젝트 형태로 반환한다
{ current: value }

// 이 오브젝트를 우리가 접근하고자 하는 태그에 ref속성으로 넣어주기만 하면 끝
<input ref={ ref } />

 

이를 사용해서 로그인페이지가 로딩되서 화면에 보여줬을때, 아이디를 클릭하지 않아도 자동적으로 포커스가 되게 해주면 바로 키보드를 쳐서 아이디를 입력할 수 있으니 아주 편하겠지?

useRef를 사용해서 이 작업을 손쉽게 해보자.

 

 

 

인풋태그와 로그인버튼을 만든다.

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

const Ref = () => {
  return (
    <div>
      <input type='text' placeholder='username' />
      <button>로그인</button>
    </div>
  );
};

export default Ref;

 

 

 

useRef와 useEffect를 추가해주고, input태그에는 ref 속성에 만든 useRef를 넣어준다.

 

→ 이 때 useEffect는 페이지가 처음 로딩될 때 한번만 실행되도록 의존성배열에 빈 배열을 넣어준다.

 

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

const Ref = () => {
  const inputRef = useRef();

  //useEffect는 의존성 배열에 [] 빈 배열을 넣어 처음 렌더링 될 때 한번만 실행되게 한다.
  useEffect(() => {
    console.log(inputRef);
  }, []);

  return (
    <div>
      {/* ref 속성 안에 inputRef를 넣어준다 */}
      <input ref={inputRef} type='text' placeholder='username' />
      <button>로그인</button>
    </div>
  );
};

export default Ref;

이제 current 값으로 input태그가 들어온 것을 알 수 있다!

바로이거야. 짜릿해

 

 

브라우저가 처음 렌더링 될 때 input태그에 focus를 달아주면 끝

useEffect(() => {
    inputRef.current.focus();
  }, []);

새로고침시 바로 focus가 실행되는 모습

 

아쉬우니까 보너스(value값 이용하기)

alert창 띄워주고 + alert창 닫으면 다시 로그인박스에 포커스 주기

  const click = () => {
    alert(`환영합니다, ${inputRef.current.value}!`);
    inputRef.current.focus();
  };

전체 코드

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

const Ref = () => {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  const click = () => {
    alert(`환영합니다, ${inputRef.current.value}!`);
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type='text' placeholder='username' />
      <button onClick={click}>로그인</button>
    </div>
  );
};

export default Ref;

 

 

느낀점

DOM조작 어떻게하나 너무 궁금했는데 속시원하다! 그리고 너무쉽다.

이뿐만 아니라 효율적인 컴포넌트 렌더링과 변수관리에도 효과적이니 쓸 데가 많겠다.