useRef

useRef란?

- 특정한 요소의 id처럼 활용 할 수 있고 변수를 만드는 것에도 사용할 수 있는 리액트 훅이다.

사용방법

1. 변수선언시 useRef(초기값)를 이용한다.

const 변수명 = useRef(초기값)

2. 특정 jsx요소에 ref={변수명} 형태로 할당해준다.

<input placeholder="아이디를 입력하세요" ref={userId} />

3. 변수에 접근은 변수명.current를 통해서만 가능하다.

 

사용예제

1. 로그인 화면예제

import React, { useRef } from 'react';

function UseRef() {
  const userId = useRef('');
  const userPw = useRef('');

  const login = () => {
    console.log(userId.current.value);
    console.log(userPw.current.value);
  };
  return (
    <div>
      UseRef
      <input ref={userId} placeholder='아이디를 입력하세요' />
      <input ref={userPw} placeholder='비밀번호를 입력하세요' type='password'
        onKeyDown={(e) => {
          if (e.key === 'Enter') login();
        }}
      />
      <button onClick={login}>login</button>
    </div>
  );
}
export default UseRef;

- 보통 입력한 값의 유효성 확인을 위해 useRef보다는 state를 활용하는 경우가 더 많다.

 

2. 간단한 계산기 예제

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

function Calculator() {
  const [resultNum, setResultNum] = useState(0);
  const firstNum = useRef(0);
  const secondNum = useRef(0);
  const sum = () => {
    setResultNum(Number(firstNum.current.value) + Number(secondNum.current.value));
  };

  return (
    <div>
      Calculator
      <input ref={firstNum} />
      <input ref={secondNum} />
      <button onClick={sum}>Add</button>
      <p>{resultNum}</p>
    </div>
  );
}

export default Calculator;

- input태그, useRef, useState, onClick 모두 활용되었다.

효율적인 변수로 사용

useRef는 재렌더링이 되지 않는 변수를 만들고자 할 때도 사용가능하다. 값이 변할 때마다 다시 렌더링하지 않아도 될 변수라면, 굳이 useState를 사용할 필요가 없다. 렌더링과 별개로, useRef값의 경우 컴포넌트가 다시 렌더링되더라도 다시 선언되는 것이 아니라 변한 값이 그대로 남아있게 된다는 점에서 변수와는 차이가 있다.

위 2번 예제에서 resultNum부분을 아래와 같이 useRef로 변경하면 아무리 값을 더해도 값이 렌더링되지 않는다.

const resultNum = useRef(0)

const sum = () => {
    resultNum.current = (Number(firstNum.current.value) + Number(secondNum.current.value));
    console.log(resultNum.current)
  };

시간초 설정하는 타이머 예제

• onChange활용하여 입력한 값 그대로 타이머에 반영되어야 한다.
• useState, onClick, useRef 활용한다.
• '설정'버튼 클릭시 시간초가 바뀌도록 하고 엔터만 입력해도 시간이 설정되도록 한다.

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

function Timer() {
  const [seconds, setSecond] = useState(60);
  const [isClicked, setIsClicked] = useState(false);
  const inputRef = useRef();

  const inputHandler = () => {
    const { value } = inputRef.current;
    setSecond(value);
  };
  useEffect(() => {
    if (isClicked) {
      const countDown = setTimeout(() => {
        if (seconds > 0) {
          setSecond(seconds - 1);
        } else {
          clearTimeout(countDown);
        }
      }, 1000);
      return () => clearTimeout(countDown);
    }
  }, [seconds, isClicked]);

  return (
    <div>
      <input ref={inputRef} onChange={inputHandler} onKeyDown={(e) => {
          if (e.key === 'Enter') {
            inputHandler();
          }
        }}
      />
      <button onClick={inputHandler}>설정</button>
      <h1>Timer</h1>
      <h1>{seconds}</h1>
      <button onClick={() => setIsClicked(true)}>start</button>
      <button onClick={() => setIsClicked(false)}>stop</button>
    </div>
  );
}
export default Timer;

타이머 예제

 

 

 

20230303 패스트캠퍼스 FE4기 수업자료를 참고하였습니다.