함수 내부에서 비동기 처리 시에 return이 선행되는 문제

[JiyeonP]

App.js에서 /student/:id를 입력했을 시에 해당 id의 학생이 존재하면 상세 프로필 페이지로 이동하기 위해,
findIdExist 함수를 정의하고 exist 값을 boolean으로 리턴하도록 구현하려고 합니다.

위와 같이 구현하면 비동기인 axios.get의 시행이 return보다 늦어져 항상 false 값이 return되는 것으로 보입니다.
.then() 내부에서의 return은 external function의 return이 아니라, 다음 then이 call 하게 되는 값에 대한 return이라고 알고 있습니다.
어떻게 하면 get의 .then()이 수행된 이후에 exist 값을 return할 수 있을까요?

조언 부탁드립니다. 감사합니다.

[woohm402]

저도 작년에 정확히 같은 고민을 했었는데요, 우선 안타깝게도 그런 findIdExist 함수는 만들 수 없습니다.

어떻게 할 수 있을지에 앞서 뭘 하려고 하고 있는 건지, 비동기가 뭔지 생각해 봐야 합니다.
그런 일이 가능하다고 가정하고 우리의 프로그램이 어떻게 돌아갈지 생각해 보겠습니다.

findIdExist가 실행되면, 그 함수는 서버에 API를 호출해본 다음 잘 됐는지 에러가 터졌는지 체크합니다.

조금 더 엄밀히 써 보겠습니다.

findIdExist가 실행되면, 그 함수는 서버에 API를 호출해본 다음 응답이 돌아올 때까지 기다렸다가, 잘 됐는지 에러가 터졌는지 확인하여 결과를 boolean으로 리턴합니다.

그럼 findIdExist는 실행되는 데에 시간이 꽤 걸리겠군요. 편의상 1초 소요된다고 가정하겠습니다. 그럼 findIdExist를 호출한 친구도 호출 이후 1초동안 아무것도 못할 거고, 그걸 호출한 친구도 1초 동안 아무것도 못할거고, ..., 결국 우리의 사이트가 1초동안 얼어있겠군요

바로 세미나 3 시작할 때 말씀드렸던, "비동기를 동기적으로 처리하면 안 되는 이유" 입니다. 우리는 비동기는 비동기 작업으로서 따로 핸들을 해 줘야 하고, 동기 코드인 것처럼 디자인하면 안 된다는 것을 공부했습니다. 그리고 이를 해결하기 위해 Promise 패턴이 나왔다는 것도 공부했었죠!

요약하자면, 그런 패턴이 불가능하도록 디자인되었습니다. 따라서 그런 패턴은 불가능합니다.

해결 방법

때문에 우리는 그런 함수 말고 다른 방식을 디자인해야 합니다. 몇 가지 해결 방법이 있을 텐데요, 사실 그런 리다이렉트를 구현하는 방법은 무한히 다양하지만 저였다면 아래와 같이 처리했을 거예요

1. 학생 상세페이지가 마운트될 때
2. useEffect에서 axios.get
3. 잘 됐으면 그대로 state에 저장
4. 안 됐으면 /students로 리디렉트 (history.push 써서)

혹시 좀더 디자인하셨던 것과 비슷한 패턴을 원하신다면 custom hook 도 가능합니다. 가령 아래와 같이

const useFindIdExist = (id) => {
  (대충 여기서 설명하기에는 너무 어려운 내용이라 지금은 생략하지만 추가로 질문하신다면 알려드리겠습니다)
}

const StudentDetail = () => {
  const { id } = useParams();
  const isExist = useFindIdExist(id); // isExist === undefined이면 체크중, true이면 존재, false이면 존재하지 않음
  ...

뭐 이런 패턴으로 작성할 수 있기는 하지만 좀 굳이 싶은 감이 있고 오히려 불편해질 거예요. 저는 그냥 첫번째 방법이 좋아 보입니다 :)