[React] useRef와 Custom Hooks

useRef로 컴포넌트의 변수 생성하기

• 새로운 Reference 객체를 생성하는 기능으로, 컴포넌트 내부의 변수로 활용한다.
• useState와 다른 점은 어떤 경우에도 리렌더링을 유발하지 않는다는 것이다.
• useRef를 활용하면 특정 DOM 요소에 접근하고, 조작할 수도 있다.

 

Register.jsx

import { useState, useRef } from "react";

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

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

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

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

  return (
    <div>
      <div>
        <input
          ref={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></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="cn">중국</option>
        </select>
      </div>
      <div>
        <textarea name="bio" value={input.bio} onChange={onChange} />
      </div>
      <button onClick={onSubmit}>제출</button>
    </div>
  );
};

export default Register;

• let count = 0; 과 같이 일반 자바스크립트 변수가 아닌 굳이 useRef를 사용하는 이유?
  • state가 변경되면서 Register 컴포넌트 전부가 리렌더링 되고, 따라서 자바스크립트 변수는 초기 값으로 계속 재설정 되기 때문에 변화한 값을 인지할 수 없다.
  • 그럼 컴포넌트 밖에 변수를 선언하면 되지 않는가? → 컴포넌트를 한 번 호출할 때는 문제가 없지만, 컴포넌트를 두 번 이상 호출할 경우 각각의 컴포넌트가 같은 변수를 공유하게 되는 문제가 생겨 원하는 결과를 얻을 수 없다.

---

React Hooks

• 클래스형 컴포넌트에서만 사용할 수 있었던 기능을 함수형 컴포넌트에서도 사용하기 위해 만들어진 것을 훅이라고 한다. 클래스형 컴포넌트는 문법이 어려워서 최근에는 대부분 함수형 컴포넌트를 사용한다.
• 앞서 배웠던 useState, useRef도 훅이다. 훅에는 접두사 use가 붙으며 대략 20개 정도있다.
• 리액트 훅들은 함수 컴포넌트 내부에서만 호출 할 수 있고, 조건문과 반복문에서는 호출이 불가하다.

 

HookExam.jsx

import useInput from "../hooks/useInput";

// 3가지 hook 관련된 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능하다.
// 2. 조건부로 호출될 수는 없다.
// 3. 나만의 훅(Custom Hook)을 직접 만들 수 있다.

const HookExam = () => {
  const [input, onChange] = useInput();
  const [input2, onChange2] = useInput();

  return (
    <div>
      <input value={input} onChange={onChange} />
      <input value={input2} onChange={onChange2} />
    </div>
  );
};

export default HookExam;

 

useInput.jsx

import { useState } from "react";

function useInput() {
  const [input, setInput] = useState("");

  const onChange = (e) => {
    setInput(e.target.value);
  };

  return [input, onChange];
}

export default useInput;

• 접두사 use를 붙이면 리액트 내부에서 훅으로 인식하여 사용자 정의 훅을 만들 수 있다.

 

출처 : 한입 크기로 잘라먹는 리액트