useRef를 더 공부해보자 [변수관리]

들어가기 앞서 useRef란..?

• 원하지 않는 렌더링 때문에 state값이 초기화가 된다면, ref를 사용하여 값의 초기화를 막을 수 있다.
• useRef는 또한 DOM 요소에 접근해서 여러가지 일들을 할 수 있다. => focus()로 예를 들 수 있고, 마치 바닐라 자바스크립트의 Document.querySelector()와 같다.

VsCode로 연습

연습1)

import { useRef, useState } from "react";

export default function UseRefPractice1() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  // countRef.current로 접근해주면 됨을 확인
  // console.log(countRef);

  console.log("렌더링됨");

  const increaseCountState = () => {
    setCount(count + 1);
  };

  const increaseCountRef = () => {
    countRef.current = countRef.current + 1;
    console.log("Ref: " + countRef.current);
    // Ref는 아무리 수정을해도 컴포넌트를 렌더링 해주지 않으므로, 실질적 값이 올라도 브라우저에는 0으로 표시되어 보인다
  };

  return (
    <div>
      <div>useRefPractice</div>
      <hr />
      <p>State: {count}</p>
      <button onClick={increaseCountState}>State올리기</button>
      <p>Ref: {countRef.current}</p>
      <button onClick={increaseCountRef}>Ref올리기</button>
    </div>
  );
}

연습2)

import { useRef, useState } from "react";

export default function UseRefPractice2() {
  const [renderer, setRenderer] = useState(0);
  const countRef = useRef(0);
  let countVar = 0;

  const increaseRef = () => {
    countRef.current = countRef.current + 1;
    console.log("Ref: " + countRef.current);
  };

  const increaseVar = () => {
    countVar = countVar + 1;
    console.log("Var: " + countVar);
  };

  const renderFunc = () => {
    // state는 값이 바뀌면 컴포넌트의 렌더링을 해주므로, 렌더링하기 위해 임의로 1을 더함
    setRenderer(renderer + 1);
  };

  // 📌 ref는 렌더링을 해도 값이 유지가 되지만, let은 렌더링 시 값이 초기화가 되는 것을 알 수 있다
  // 📌 따라서 ref는 컴포넌트가 마운트 되어서, 언마운트 시점까지 값이 유지가 되는 것을 알 수 있다

  return (
    <div>
      <div>useRefPractice2</div>
      <hr />
      <p>Ref: {countRef.current}</p>
      <button onClick={increaseRef}>Ref올리기</button>
      <p>Var: {countVar}</p>
      <button onClick={increaseVar}>Var올리기</button>
      <br />
      <button onClick={renderFunc}>렌더링하기</button>
    </div>
  );
}