[React] useRef로 component 내에 reference객체 생성

 

useRef vs useState

useRef	useState
Reference 객체를 생성	State를 생성
컴포넌트 내부의 변수로 활용 가능	컴포넌트 내부의 변수로 활용 가능
값이 바뀌어도 컵포넌트 리렌더링 발생하지 않음	값이 바뀌면 컵포넌트 리렌더링 발생

 

 

사용 예)

input tag에 DOM 요소를 reference 객체에 저장하여 input값이 빈 경우 focus 호출

 

import { useState, useRef } from "react";

const Register = () => {
  const [input, setInput] = useState({
    name: "",
    birth: "",
    country: "",
    bio: "",
  });
  const countRef = useRef(0);
  const inputRef = useRef();
  console.log(input);

  // 통합 이벤트 핸들러
  const onChange = (e) => {
    countRef.current++;
    current++;
    console.log("countref current", countRef.current);
    console.log("current", current);
    setInput({
      ...input,
      [e.target.name]: e.target.value, // 대괄호를 쓰는 이유는 key로 사용 한다는 의미
    });
  };

  const onSubmit = () => {
    if (input.name === "") {
      console.log(inputRef.current); // <input name="name" placeholder="이름" value="">
      // 이름을 입력하면 DOM 요소 포커스
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <div>
        <input
          ref={inputRef} // input tag DOM 요소가 inputRef 오브젝트에 저장 됨
          name="name"
          value={input.name}
          onChange={onChange}
          placeholder={"이름"}
        />
      </div>
      <div>
        <input
          name="birth"
          value={input.birth}
          type="date"
          onChange={onChange}
        />
      </div>
      <div>
        <select name="country" value={input.country} onChange={onChange}>
          <option value=""></option>
          <option value="KR">한국</option>
          <option value="US">미국</option>
          <option value="UK">영국</option>
          <option value="CA">캐나다</option>
        </select>
      </div>
      <div>
        <textarea name="bio" value={input.bio} onChange={onChange} />
      </div>
      <button onClick={onSubmit}>제출</button>
    </div>
  );
};

export default Register;

 

 

파일내의(=컴포넌트의 외부에) let 변수와 userRef의 차이점은?

=> let의 경우 전역변수 처럼 하나의 컴포넌트가 여러개로 사용될 경우 let변수를 공유하게 됨.

=> userRef의 경우 같은 컴포넌트라도 각각이 useRef를 가지고 있음