React 에러 - Cannot read properties of undefined

Cannot read properties of undefined "something"

-> 값이 정의되지 않아서 읽을 수 없을 때 발생하는 오류!!!!

 

📌 원인

state가 비동기적이며 처음 렌더링 하기 전에 동작하기 때문에!!!!! state가 정의되지 않았기 때문에 undefined가 된다

 

해결 방법

state에게 들어올 값의 타입을 미리 알려주기

function Component() {
  // useState 괄호 안이 비어있는 건 비추 
  const [date, setData] = useState();
  
  // useState에 미리 값의 타입을 알려주기
  const [date, setData] = useState([]);
  // 혹은
  const [date, setData] = useState({});
   // 또는
  const [date, setData] = useState("");
   // 타입을 모르겠다면
  const [date, setData] = useState(null);

  return (
   ...
  )
}

 

&& 연산자와 조건문 활용

function Component() {
  const [data, setData] = useState("");

  return (
    <div class="App">
      {
        data && <p>Hello!</p>
      }		
    </div>
  )
}

• && 연산자는 && 앞뒤로 false값을 찾고 false가 없다면 뒤에 있는 값을 출력
• 앞 뒤 모두 true면 뒤에 있는 값을 출력
• 조건식에 false가 되면 null이 되면서 렌더링 하지 않고 => 오류도 안남!

const [img, setImg] = document.querySelectorAll('.img');

useEffect(() => {
  if (img) {
  	console.log(img[0]);
  }
}, [ img ]);

return (
  <div>
    {
      data.map((item, idx) => {
        return <div className="img" key={idx}></div>
      })
    }
  </div>
)

• if 조건문을 사용하여 img 값이 존재하는지 확인해주기 

 

 

Optional Chaing ? (물음표) 연산자 사용하기

const rolling () => {
	const $ele = document.querySelector(".ele");
  	
  	// 지금 $ele가 있어? 있으면 margin top 적용하고 아니면 아무것도 하쥐마
	$ele?.getElementsByClassName.marginTop = "2em";
}

return (
  <div className"App">
    <div className="ele"></div>
  </div>
)

• 마침표 앞에 물음표를 사용하면 유효한 값이 없을 경우에는 undefined 를 반환
• 값이 있으면 마침표 뒤를 실행하기 때문에 오류를 방지 할 수 있다. 

 

DOM 엘리먼트 조작은 ref hook 사용

 

• ref는 리렌더링시에도 레퍼런스 값이 유지 되기 때문에, 레퍼런스 값이 업데이트 되더라도 리렌더링되지 않는다 

state
state가 변화하면 리렌더링이 됨
비동기적이며 렌더링을 완료되었을 때  사용 가능 

ref
동기적이라 업데이트 되면 바로 사용 가능 

import { useRef } from 'react';

const LabPage = () => {
  const anchorRef = useRef(null);
	
  const anchorHandler = () => {
  	const anchor = anchorRef.current;
    
    ...
  }
  
  return (
    <div className="anchor" ref={ anchorRef }> 
		...
    </div>
  )
}