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

 

useRef - 새로운 Reference 객체를 생성하는 기능

const refObject = useRef()

refObject → 컴포넌트 내부의 변수(일반적인 값 저장 가능)

 

useRef	useState
Reference 객체 생성	State 생성
컴포넌트 내부의 변수 활용 가능	컴포넌트 내부의 변수로 활용 가능
어떤 경우에도 리렌더링 유발x	값이 변경되면 컴포넌트 리렌더링

 

useRef를 이용하면 

해당 요소에 Foucus를 주거나 요소의 스타일 변경 가능

 

1. 레퍼런스 객체의 활용 사례

import { useRef } from 'react';

 

리액트로 부터 이 useRef라는 함수를 불러온다.

  const refObj = useRef();
  console.log(refObj);

래퍼런스 객체란 이 Currnet라는 프로퍼티에 현재 보관할 값을 담아두기만 하는 단순한 자바스크립트 객체이다. 

 

초기값 설정도 가능

  const refObj = useRef(0);
  console.log(refObj.current);

값을 사용하고 싶을 때 점 표기법으로 .current라고 적으면 된다 .

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

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

  const refObj = useRef(0);
  console.log(refObj.current);

  const onChange = (e) => {
    setInput({
      ...Info,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <div>
      <button
        onClick={() => {
          refObj.current++;
          console.log(refObj.current);
        }}
      >
        ref +1
      </button>
      <div>
        <input
          name="name"
          value={input.name}
          onChange={onChange}
          placeholder={'이름'}
        />
      </div>

      <div>
        <input
          name="birth"
          value={input.birth}
          onChange={onChange}
          type="date"
        />
      </div>

      <div>
        <select name="country" value={input.country} onChange={onChange}>
          <option></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="jp">일본</option>
        </select>
      </div>

      <div>
        <textarea name="bio" value={input.bio} onChange={onChange} />
      </div>
    </div>
  );
};

export default Register;

 

0은 rejObj 초기값, ref +1 버튼을 통해서 값이 출력되지만 리렌더링을 유발 x

 

refObj는 컴포넌트 내부에서 렌더링에 영향을 미치지 않을 때 사용될 수 있다. 

 

수정횟수를 counting하는걸 만들어 보겠다

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

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

  // 출 - 수정을 할때마다 countRef랑 reference 객체의 값
  const countRef = useRef(0);

  const onChange = (e) => {
    // 출 - 을 1씩 증가 시킴
    countRef.current++;
    console.log(countRef.current);

    setInput({
      ...input, // 
      [e.target.name]: e.target.value,
    });
  };

  return (
    <div>
      <button
        onClick={() => {
          countRef.current++; 
          console.log(countRef.current);
        }}
      >
        ref +1
      </button>
      <div>
        <input
          name="name"
          value={input.name}
          onChange={onChange}
          placeholder={'이름'}
        />
      </div>

      <div>
        <input
          name="birth"
          value={input.birth}
          onChange={onChange}
          type="date"
        />
      </div>

      <div>
        <select name="country" value={input.country} onChange={onChange}>
          <option></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="jp">일본</option>
        </select>
      </div>

      <div>
        <textarea name="bio" value={input.bio} onChange={onChange} />
      </div>
    </div>
  );
};

export default Register;

2. 새로운 레퍼런스 객체를 생성해 레지스터 컴포넌트가 렌더링하고 있는 DOM 요소들을 직접 조작

- 회원가입 제출하는 버튼 생성

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

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

  // 출 - 수정을 할 때마다 countRef랑 reference 객체의 값
  const countRef = useRef(0);
  // input 레퍼런스에 접근하기 위해
  const inputRef = useRef();

  const onChange = (e) => {
    // 출 - 을 1씩 증가시킴
    countRef.current++;
    console.log(countRef.current);

    setInput({
      ...input, //
      [e.target.name]: e.target.value,
    });
  };

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

  return (
    <div>
      <div>
        {/* 레퍼런스 객체를 사용하여 input에 접근 */}
        <input
          ref={inputRef}
          name="name"
          value={input.name}
          onChange={onChange}
          placeholder="이름"
        />
      </div>

      <div>
        <input
          name="birth"
          value={input.birth}
          onChange={onChange}
          type="date"
        />
      </div>

      <div>
        <select name="country" value={input.country} onChange={onChange}>
          <option value="">국가 선택</option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="jp">일본</option>
        </select>
      </div>

      <div>
        <textarea
          name="bio"
          value={input.bio}
          onChange={onChange}
          placeholder="자기소개를 입력하세요"
        />
      </div>

      <div>
        <button onClick={onSubmit}>제출</button>
      </div>
    </div>
  );
};

export default Register;

자바스크립트로 함 바꿔봄 -> 어떤 문제점이 생기냐?에대한 설명

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

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

  // 출 - 수정을 할 때마다 countRef랑 reference 객체의 값
  const countRef = useRef(0);
  // input 레퍼런스에 접근하기 위해
  const inputRef = useRef();

  let count = 0;

  const onChange = (e) => {
    // 출 - 을 1씩 증가시킴
    // countRef.current++;
    count++;
    console.log(countRef);

    setInput({
      ...input, //
      [e.target.name]: e.target.value,
    });
  };

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

  return (
    <div>
      <div>
        {/* 레퍼런스 객체를 사용하여 input에 접근 */}
        <input
          ref={inputRef}
          name="name"
          value={input.name}
          onChange={onChange}
          placeholder="이름"
        />
      </div>

      <div>
        <input
          name="birth"
          value={input.birth}
          onChange={onChange}
          type="date"
        />
      </div>

      <div>
        <select name="country" value={input.country} onChange={onChange}>
          <option value="">국가 선택</option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="jp">일본</option>
        </select>
      </div>

      <div>
        <textarea
          name="bio"
          value={input.bio}
          onChange={onChange}
          placeholder="자기소개를 입력하세요"
        />
      </div>

      <div>
        <button onClick={onSubmit}>제출</button>
      </div>
    </div>
  );
};

export default Register;

 

 자바스크립트 코드로 작성하면 onChangeEventHandler가 실행되면서 state의 값을 변경하낟. 그러면 어떻게 되느냐?

Register 컴포넌트가 리렌더링된다. 

컴포넌트가 리렌더링 된다는 것은 레지스터 역할이 다시 호출이 되는 것이다. 그래서 함수 안에 있는것도 다시 호출되는 것이다. 

 

🤔 만약에 let count = 0을 Register 밖 즉, 외부에 하면 어떻게 되냐? 라는 궁금증이 생긴다. 

그러면 수정횟수가 잘 카운팅 되는 것을 확인할 수 있지만 좋은 방법은 아니다. 

만일 두개의 Register컴포넌트가 있을 경우 하나의 변수를 공유하기 문제가 발생한다. 

 

그래서 useRef를 이용하는 것이다!