배경

handleSubmit 함수 안에 폼 유효성 검사, 네트워크 요청등 로직이 섞여 있어서 리팩토링을 하려고 한다

const handleSubmit = async (e: React.FormEvent) => {
	e.preventDefault();
    setParkingInfo(undefined);
 
	if (inputValue == "") {
    	setInputErrorMessage("차량 번호 4자리를 입력해주세요");
        return;
 	}
 
 	if (Number.isNaN(Number(inputValue))) {
    	setInputErrorMessage("숫자만 입력 가능합니다");
        return;
	} else if (inputValue.split(" ").join("").length !== 4) {
    	setInputErrorMessage("숫자 4자리를 입력해주세요");
        return;
 	}
 
 	setLoading(true);
    const q = query(collection(db, "parking_records"));
    const querySnapshot = await getDocs(q);
 
 	let findInputValue: ParkingData | undefined;
 
 	querySnapshot.forEach((doc) => {
    	const data = doc.data() as Data;
        if (data.car_number.includes(inputValue)) {
        	findInputValue = { id: doc.id, data };
        }
	});
 
	if (!findInputValue) {
        setLoading(false);
        setInputErrorMessage("등록되지 않은 차량입니다");
        return;
	} else {
        setParkingInfo(findInputValue);
        setLoading(false);
	}
};
 

먼저 네트워크 요청 하는 로직을 분리하자
그래서 아래처럼 나눠놨더니 result 부분에서 오류가 발생했다

const handleSubmit = async (e: React.FormEvent) => {
	e.preventDefault();
    setParkingInfo(undefined);

	if (inputValue == "") {
    	setInputErrorMessage("차량 번호 4자리를 입력해주세요");
        return;
	}

	if (Number.isNaN(Number(inputValue))) {
    	setInputErrorMessage("숫자만 입력 가능합니다");
        return;
	} else if (inputValue.split(" ").join("").length !== 4) {
    	setInputErrorMessage("숫자 4자리를 입력해주세요");
        return;
	}
    
	setLoading(true);
	const result = getParkingInfo(inputValue); // 🚨
    if (!result) {
        setLoading(false);
        setInputErrorMessage("등록되지 않은 차량입니다");
        return;
	} else {
    	setParkingInfo(result);
        setLoading(false);
	}
};

async function getParkingInfo(inputValue: string) {
  	const q = query(collection(db, "parking_records"));
  	const querySnapshot = await getDocs(q);

  	let findInputValue: ParkingData | undefined;

  	querySnapshot.forEach((doc) => {
    const data = doc.data() as Data;
    if (data.car_number.includes(inputValue)) {
      findInputValue = { id: doc.id, data };
    }
  });

  return findInputValue;
}

오류 메시지로는 이렇게 적혀있었다
Did you forget to use 'await'? (너 await 까먹었어?)
미안 내가 await 개념을 잘 몰라 확실히 공부하고 가기

동기 / 비동기

먼저 async/await 개념을 위해선 동기, 비동기부터 확실히 해야한다
자바스크립트는 기본적으로 작업을 동기적으로 수행한다
한가지 일을 끝내야 그 다음 일을 한다는 뜻.

비동기로 작업한다는 말은
한가지 일을 시작하고 끝날 때 까지 기다리는게 아니라 다른 일을 해도 된다는 뜻이다

그리고 그 일이 끝난다면 언제 끝났는지, 성공했는지, 실패했는지 정보를 담은 포장 상자를 주는데
그게 바로 어디서 많이 들어본 Promise 였다
그 Promise를 await으로 벗겨 결과를 받으면 되는것이다

비동기 방식은 보통 네트워크 요청처럼 시간이 오래 걸리는 작업에 쓰인다

async, await

그런 비동기를 순서대로 일이 작업되는것 처럼. 동기처럼 깔끔하게 보이도록 해주는 애들이 async/await 인거다

내가 async/await 를 하나의 용어라고 외워야 된다고 생각해서 겁먹었는데
그냥 '비동기', '기다리다' 였다

---

사용법

그냥 '이건 비동기 함수야'라는 것을 알려주기 위해 함수 옆에 async 키워드를 작성하면 되고
결과를 기다렸다가 받을 때는 변수 옆에 await 키워드를 적으면 된다

그래서 아까 오류는 아래처럼 await을 적어 해결하면 된다

const handleSubmit = async (e: React.FormEvent) => {
	e.preventDefault();
    setParkingInfo(undefined);

	...
	const result = await getParkingInfo(inputValue);  // ✅
	...
};

async function getParkingInfo(inputValue: string) {
  	const q = query(collection(db, "parking_records"));
  	const querySnapshot = await getDocs(q);

  	let findInputValue: ParkingData | undefined;

  	querySnapshot.forEach((doc) => {
    const data = doc.data() as Data;
    if (data.car_number.includes(inputValue)) {
      findInputValue = { id: doc.id, data };
    }
  });
  return findInputValue;
}

그리고 await 키워드는 꼭 async 함수 안에서만 사용할수 있으니 신경쓰기