Cannot read properties of undefined 에러

처음 마운트 되었을 때 (페이지가 최초 렌더링 되었을 때), state는 undifined라고 알려주는 에러

렌더링 전 동작하면서 비동기로 동작하는 state에 아무것도 읽히지 않았을 때 나타난다. 아직 값이 담기지 않은 상태이기 때문에 값이 있는 것도 없는 것도 아닌 상태라고 얘기해 주는 것이다.

✨ 기본적으로 데이터 값이 존재하는지 확인하는 습관을 가져야겠다.

해결 방법

1. State에게 들어올 값의 타입을 미리 알려주기
   useState 괄호 안이 비어두는 것 대신 미리 값의 타입을 알려준다.
   useState([]), useState(""), useState(null)...
   

2. && 연산자와 조건문 활용하기
   && 조건을 모두 충족할 때 true => 값을 출력해주는 원리
   조건식에 false가 있는 경우 null이 되고 렌더링하지 않으며, 렌더링하지 않으니 오류도 출력되지 않는다.

if 조건문을 사용하여 데이터 값이 존재하는지 확인한다.

useEffect(() => {
	if(user?.email) setValue ('email', user?.name);
}, [user]);

3. ?(물음표) 연산자
   값이 있을 때에만 마침표 뒤를 실행하기 때문에 오류를 방지할 수 있다.

---

참고글
https://velog.io/@nemo/react-error-cannot-read-property