반응 null 오류가 보고된 경우 수행할 작업

null 오류 대응 솔루션: 1. 해당 js 파일을 엽니다. 2. 요소가 DOM에 렌더링되었는지 확인합니다. 3. useEffect 후크의 참조에 액세스하거나 이벤트가 트리거될 때 참조에 액세스합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

react null 오류가 보고되면 어떻게 해야 하나요?

React 오류 참조는 정의되지 않음 또는 null을 반환합니다.

해당 DOM 요소가 렌더링되기 전에 해당 DOM 요소의 현재 속성에 액세스하려고 하면 일반적으로 React의 참조는 정의되지 않음 또는 null을 반환합니다. 이 문제를 해결하려면 useEffect 후크에서 참조에 액세스하거나 이벤트가 트리거될 때 참조에 액세스할 수 있습니다.

import {useRef, useEffect} from 'react';
export default function App() {
  const ref = useRef();
  console.log(ref.current); // ?️ undefined here
  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ?️ element here
  }, []);
  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
    </div>
  );
}

useEffect

useRef() 후크는 초기 값을 매개변수로 전달할 수 있습니다. 이 후크는 변경 가능한 ref 개체를 반환하고 ref 개체의 현재 속성은 전달된 매개 변수로 초기화됩니다.

useRef의 초기 값을 전달하지 않았으므로 현재 속성이 정의되지 않음으로 설정되어 있습니다. 후크에 null을 전달하면 현재 속성에 즉시 액세스하면 null을 얻게 됩니다.

ref 속성이 설정된 div 요소에 액세스하려면 ref 객체의 현재 속성에 액세스해야 한다는 점에 유의해야 합니다.

ref 속성을 요소에 전달하면(예:

import {useRef, useEffect} from 'react';
export default function App() {
  const ref = useRef();
  console.log(ref.current); // ?️ undefined here
  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ?️ element here
  }, []);
  const handleClick = () => {
    console.log(ref.current); // ?️ element here
  };
  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}