5_useRef 란 무엇인가?

useRef는 React에서 사용되는 Hook 중 하나로, 

함수 컴포넌트 내에서 변수를 생성하고 관리할 수 있게 해주는 기능입니다. 

 

useRef를 사용하면 컴포넌트가 리렌더링될 때마다 변수가 재생성되지 않고 이전 값이 유지됩니다. 

 

주로 DOM 요소에 대한 참조를 저장하거나, 컴포넌트의 생명주기를 벗어난 값을 유지할 때 활용됩니다.

useRef를 사용하면:
1. DOM 요소에 대한 참조 저장:

useRef를 사용하여 컴포넌트가 렌더링될 때 생성된 DOM 요소에 대한 참조를 저장할 수 있습니다. 이를 통해 필요한 경우에 DOM 요소에 직접 접근하여 작업할 수 있습니다.

2. 컴포넌트의 생명주기를 벗어난 값 유지:

useRef를 사용하여 컴포넌트의 생명주기를 벗어난 값을 유지할 수 있습니다. 이는 컴포넌트가 리렌더링될 때 변수가 초기화되지 않고 이전 값을 유지하게 하며, 이를 활용하여 이전 상태를 비교하거나, 컴포넌트 외부에서 변수를 변경할 때 사용할 수 있습니다.

 

아래는 useRef를 사용한 간단한 예제입니다:

import React, { useRef } from 'react';

function MyComponent() {
  // useRef를 사용하여 초기값이 null인 ref 변수 생성
  const myRef = useRef(null);

  // 버튼 클릭 시 ref 변수의 current 속성을 통해 DOM 요소에 접근
  const handleClick = () => {
    if (myRef.current) {
      // DOM 요소의 배경색을 빨간색으로 변경
      myRef.current.style.backgroundColor = 'red';
    }
  };

  return (
    <div>
      {/* ref 속성에 useRef로 생성한 변수를 할당 */}
      <div ref={myRef}>My Div</div>
      {/* 버튼 클릭 시 handleClick 함수 호출 */}
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
}

export default MyComponent;