Uncaught runtime errors:

로컬에서 발생한 에러이고

에러 내용 :

Uncaught runtime errors:
ERROR
Cannot read properties of undefined (reading 'data')
TypeError: Cannot read properties of undefined (reading 'data')
    

Information.tsx

/** 스터디 정보 컴포넌트 */
const Information: React.FC = () => {
    
  { 중략... }
  
    const [useId, setUserId] = useState('');

    // 로그인 상태면 isUserLoggedIn===true
    const isUserLoggedIn = isLogin();

    // 리액트 쿼리 훅으로 유저 데이터 가져오기
    const {
        data: userData,
        isLoading: userDataLoading,
        isError: userDataError,
        isFetching: userDataFetching,
    } = useQuery('userData', () => getUserData(String(localStorage.getItem('token'))), {
        enabled: isUserLoggedIn, // 로그인 상태일 때만 useQuery 호출
    });

    // 리액트 쿼리 훅으로 스터디 데이터 가져오기
    const {
        data: studyData,
        isLoading: studyDataLoading,
        isError: studyDataError,
        isFetching: studyDataFetching,
    } = useQuery(['studyData'], () => getInfoStudyData(lastPathSegment).then((response) => response.data));

    // 데이터가 로딩 중이 아니고, 패칭중 아니고, 에러가 아닐 때에만 user_id를 설정합니다.
    useEffect(() => {
        if (!userDataLoading && !userDataError && !userDataFetching) {
            setUserId(userData.data.user_id);
        }
    }, [userDataLoading, userDataError, userDataFetching, userData]);

  
    { 중략... }

  
    // 스터디 데이터 분해구조 할당
    const { title, content, start, end, chat_link, headcount, acceptcount, leader_name, leader_id, _id, deadline } =
        studyData;
   return (
        <Container>
     
            { 중략... }
     
                {/* 로그인 유저가 스터디장이면서 종료일이 안됐을 경우 보이도록 */}
                {useId === leader_id && !isStudyClosed ? (
                    <StyledStudyManageButton onClick={handleStudyManageButtonClick}>
                        <SettingsIcon fontSize="large"></SettingsIcon>
                    </StyledStudyManageButton>
                ) : (
                    <></>
                )}
   
            { 중략... }
            
        </Container>
    );
};

  

발생 원인 :

해당 코드에서 발생하는 오류는 "Cannot read properties of undefined (reading 'data')"으로, 이 오류는 정의되지 않은 객체의 속성에 접근하려고 할 때 발생.

코드에서 비회원 로직이 제대로 구현 되지 않은 상태에서 userData.data.user_id에 접근하는 부분에서 발생.

위 문제는 userData 객체가 아직 정의되지 않았거나 undefined인 경우에 발생.

비회원이면 => undefined인 경우

이러한 상황을 처리하기 위해 사용자의 로그인 상태에 따라 다른 경우를 처리할 수 있도록 조건부를 잘 확인해서 처리하자!

바뀐 코드 부분 :

useEffect(() => {
        if (!userDataLoading && !userDataError && !userDataFetching && userData?.data) {
            setUserId(userData.data.user_id);
        }
    }, [userDataLoading, userDataError, userDataFetching, userData]);

해결법 :

userData?.data를 useEffect의 위와 같은 조건문에 넣어 userData?.data를 확인 후 정의되지 않은 객체의 속성에 접근하는 것을 피하고, 특정 시나리오에서 객체의 속성에 접근하는 부분에서 유사한 조건부 확인을 적용하면 "Cannot read properties of undefined" 오류를 피할 수 있습니다.

회고

위와 같이 오류 없이 성공..! 할 수 있었다.

불과 10자 남짓한 코드가 추가 되어서 오류가 해결되었지만 동적 처리(Dynamic Handling)를 이해하고 로직을 구성하는 것이 중요하다는 걸 느꼈다.