위듀 개발 중에 버그가 발생하였다.

면접 도중 API 호출하고 바로 모드 변경 시 이전 모드에서의 면접내역이 바뀐 모드에 그대로 넘어오는 버그였다.

이는 모드가 변경될 때 완전히 다른페이지로 이동하는 것이 아니라, pathvariable을 이용하여 경로처리를 했기 때문에 컴포넌트가 다시 마운트 되지 않고 리렌더링만 하게 되므로 이전 API호출이 현재 컴포넌트의 상태들에 영향을 주어서 발생하였다.

이를 해결하기 위해서는 모드가 변경될 때 이전의 API fetch 호출을 중지시켜야 했다.

이는 JS의 AbortController를 이용하여 구현할 수 있었다.

	  
  // 모드 변경 전 API 호출을 중지시키기 위한 ref
  const abortController = useRef<AbortController | null>(null); 
  
	...

  useEffect(() => {
    isMount.current = true;
    // 페이지 마운트 시 gpt부터 말하도록 submit 함수를 호출
    handleSubmit();

    // 클린업 함수를 이용하여 모드가 바뀌기 전의 API 호출을 중지시킴
    return () => {
      abortController.current?.abort();
    };
  }, [restartToggle.current]);
  
  ...
  
  
  abortController.current = new AbortController();
    const response = await fetch(
      `http://localhost:8080/interview/${selectedMode}`,
      {
        method: `POST`,
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: name,
          job: job,
          messages: updatedMessages,
        }),
        signal: abortController.current?.signal,
      }
    );

AbortController 인스턴스를 생성하고 signal 속성을 fetch요청 시 넣어주어 해당 fetch와 controller를 연결시킨다. 그리고 fetch를 중지시키고 싶을 때 AbortController 인스턴스의 abort() 함수를 호출하면 된다.

AbortController를 useRef로 생성한 이유는 일반 변수로 생성하면 fetch 도중에 리렌더링이라도 되면 fetch를 제어하던 인스턴스가 초기화 되어버리기 때문이다.