[React] Uncaught ReferenceError: useRef is not defined 오류

(+) 💣 트러블이슈 발생!!!
Uncaught ReferenceError: useRef is not defined 오류

[React] 컴포넌트에 ref 달기 예제 진행 중에 계속 사용해오던 App.jsx 코드에 그대로 작성했는데, 웹뷰에 랜더링 안 되는 문제가 발생했다.

Uncaught ReferenceError: useRef is not defined 오류는 React의 useRef 훅을 사용하기 위해 useRef를 가져오지 않았을 때 발생한다.

👉 이 문제를 해결하려면 useRef를 React로부터 명시적으로 가져와야 한다.
useRef를 사용하려면 import React와 함께 useRef를 추가해야 함!

// import React from 'react';
import React, { useRef } from 'react'; // useRef를 명시적으로 가져오기
import ScrollBox from './features/5_ref_DOM/ScrollBox';

const App = () => {
  // return <ScrollBox />;
  const scrollBoxRef = useRef(null); // useRef로 ref 생성

  return (
    <div>
      <ScrollBox ref={scrollBoxRef} />
      <button onClick={() => scrollBoxRef.current.scrollToBottom()}>
        맨 밑으로
      </button>
    </div>
  );
};

export default App;

이러한 문제를 방지하려면 함수형인지, 클래스형인지 잘 확인해야 할 듯?!
기존 함수형 주석처리하고, 책에 나온대로 클래스형으로 작성했더니 잘 구현된다.
애초에 내가 App.jsx 코드에서 함수형, 클래스형을 놓친 게 원인이었다...