useRef

컴포넌트 내부에 새로운 Reference 객체를 생성하는 기능

const refObject = useRef()
이 refObject 객체는 컴포넌트 내부의 `변수`로서 일반적인 값들을 저장 할 수 있음

useState와의 차이점

• useState
  • 값이 변경되면 컴포넌트 리렌더링
  • 컴포넌트 내부의 변수로 활용 가능
• useRef

  • 어떤 경우에도 리렌더링을 유발하지 X

  • 특정 DOM 요소에 접근, 조작 가능

  • 컴포넌트 내부의 변수로 활용 가능

    렌더링에 영향을 미치지않는 변수를 생성하고 싶을때 !

  const refObj = useRef();
  console.log(refObj);       // {current: undefined}

왜 js로 변수를 만드는게 아니라 useRef로?

let count = 0;

state를 바꿀 때 리렌더링되어서 계속 0으로 초기화되기때문에 계속 1이 출력이 됨

⇒ 그럼 컴포넌트 외부에 변수를 선언하면 ?

1 이상으로 잘 카운트가 올라감, 하지만 변수를 외부에 선언하게 되면..

컴포넌트를 한 번만 렌더링하면 문제가 없지만 (ex. App.jsx에서 해당 컴포넌트를 한 번 렌더링)

두 번 이상 렌더링하게 되면 (App.jsx에서 이렇게 여러번 렌더링) 이때에는 문제 발생

하나의 count 변수를 두 개의 레지스터 컴포넌트가 공유하게 됨

각각 컴포넌트 별로 따로 카운트를 세야하는데 값을 공유하게 됨

파일 전체를 호출한 게 아니라 Register 함수를 그냥 두 번 호출한거라서 하나의 변수를 공유한 것

결론

컴포넌트가 리렌더링 된다고해도 초기화되지않음 ⇒ 컴포넌트 내부의 변수가 필요하다면 useRef 또는 useState로 만들어야함

import { useState, useRef } from "react";
// 간단한 회원가입 폼
// 1. 이름
// 2. 생년월일
// 3. 국적
// 4. 자기소개

const Register = () => {
  const [input, setInput] = useState({
    name: "",
    birth: "",
    country: "",
    bio: "",
  });

  const countRef = useRef(0);
  const inputRef = useRef();

  const onChangeInput = (e) => {
    countRef.current++;
    console.log(countRef.current);
    setInput({
      ...input,
      [e.target.name]: e.target.value,
    });
  };

  const onsubmit = () => {
    if (input.name === "") {
      // 이름을 입력하는 DOM 요소를 focus
      // 이름을 입력하는 input Tag에 우리가 접근할 수 있어야해 -> useRef 이용
      // console.log(inputRef.current);
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <div>
        <input
          // input 태그가 렌더링하는 DOM 요소가 inputRef라는 레퍼런스 오브젝트에 저장이 됌
          ref={inputRef}
          name="name"
          value={input.name}
          onChange={onChangeInput}
          placeholder={"이름"}
        />
      </div>
      <div>
        <input
          name="birth"
          value={input.birth}
          onChange={onChangeInput}
          type="date"
        />
      </div>
      <div>
        <select name="country" value={input.country} onChange={onChangeInput}>
          <option></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="uk">영국</option>
        </select>
        {/* {country} */}
      </div>
      <div>
        <textarea name="bio" value={input.bio} onChange={onChangeInput} />
      </div>
      <button onClick={onsubmit}>제출</button>
    </div>
  );
};

export default Register;