230925 개발일지 TIL - React에서 Firebase를 이용한 데이터 처리와 Antd로 에러 메시지 표시

React에서 Firebase를 이용한 데이터 처리와 Antd로 에러 메시지 표시

Firebase에서 Firestore 데이터 불러오기

import { collection, getDocs, orderBy, query, where } from 'firebase/firestore';

const Data = () => {
  
  useEffect(() => {
    if (userUid) {
      const fetchData = async (userUid) => {
        try {
          const q = query(
            collection(db, 'userTemplate'),
            where('userId', '==', userUid),
            orderBy('createdAt'),
          );
          const querySnapshot = await getDocs(q);
          const data = querySnapshot.docs?.map((doc) => ({
            id: doc.id,
            ...doc.data(),
          }));

          setData(data);
        } catch (error) {
          console.error('데이터 가져오기 오류:', error);
        }
      };

      fetchData(userUid);
    }
  }, [userUid]);

};

Ant Design으로 에러 메시지 표시

위의 코드에서 데이터 가져오기 과정 중에 오류가 발생하면 콘솔에 에러 메시지가 출력되는데 하지만 실제 사용자에게는 에러메시지가 보여지지 않는다. 그래서 Ant Design의 message API를 활용하여 보다 사용자 친화적인 경고 메시지를 보여줄 것이다.

import { message } from 'antd';

const Data = () => {
  
  useEffect(() => {
    if (userUid) {
      const fetchData = async (userUid) => {
        try {
        } catch (error) {
          message.error('데이터 가져오기 오류가 발생했습니다.');
        }
      };

      fetchData(userUid);
    }
  }, [userUid]);

};

antd의 message.error() 함수를 호출하여 에러 메시지를 사용자에게 보여줄 수 있다.