[Spring, React] react-query 추가 후 기능 먹통 오류 발생,,, 해결해보자!

 

 

리액트에 라이브러리를 추가한 뒤
검색창에 검색어를 입력하고 엔터를 누르면
완전히 화면이 멈춰버리는 이상한 문제가 발생했다.
왜 그런지 찾아보고 해결해보자.

 

 

 

 

1. 문제 상황

방황하는 마우스

 

마지막으로 프로젝트를 검토하면서 소소하게 수정해야할 부분부터 불편했던 점, 아쉬웠던 부분 등 여러군데 수정을 진행했다. 그런데 그 뒤부터 검색 기능이 동작하지 않았다. 여기서 나의 문제점이 있었는데, 고칠 때마다 모든 기능을 확인했어야했지만 검색만 빼고 확인하는 바람에 이 문제가 언제부터 발생하게 되었는지 정확히 파악할 수 없었다.

F12를 눌러서 network를 통해 어떤 문제가 발생했는지, 왜 먹통이 된건지 알고 싶어도 F12조차 눌리지 않았다. 게다가 에러가 발생하지도 않고 run은 잘 돌아가고 있었기에 쉽게 이유를 찾을 수 없었다.

 

 

 

 

---

 

 

 

 

2. 문제의 원인 찾기

• Elasticsearch 혹은 Docker 문제?
  이 프로젝트엔 검색 기능이 두군데에 존재한다. 고객 파트와 관리자 파트 이 두군데에서 검색을 할 수 있도록 만들었다. 그리고 그 중 고객 파트에만 Elasticsearch를 추가했다. 만약 Docker나 Elasticsearch 문제라면 관리자 파트 쪽 검색 부분은 문제없이 돌아갈 것이다. 그렇게 관리자 쪽 검색 기능을 확인해본 결과, 검색 기능 자체에 문제가 생긴 것을 알게되었다. 관리자 파트 쪽 검색에서도 먹통이 되며 완전히 멈춰버리는 현상이 발생했다. 
  
  
  
• 백엔드 문제? 프론트 문제?
  백엔드가 문제인지, 프론트가 문제인지 알아내야 했다. 일단 F12가 눌리지 않는다는게 큰 힌트가 되었다. 이건 보통 프론트 문제였다. 그리고 수정하는 과정에서 백엔드는 거의 건드리지 않았기 때문에 자연스럽게 프론트 문제에 초점을 맞출 수 있게 되었다.
  
  
  
• 프론트 검색 코드와 관련된 수정 사항
  검색 코드를 건드렸던 경우는 딱 두 번, 그 중 이런 문제를 발생시킬 만한 건 하나 밖에 없었다. react-query 라이브러리를 추가하면서 [ 즉시 검색 API 호출 ] 방식에서 [ 상태값 변경 후 라이브러리가 다시 조회 ] 하는 방식으로 바꿨었다.
  
  쉽게 설명하면 라이브러리 추가 전에는 [ 검색어 입력 -> 엔터 버튼 -> /search 직접 호출 -> 응답 데이터를 테이블에 넣음 ] 순서로 흐름이 아주 단순했다. 그런데 라이브러리를 추가하면서 [ 검색어 상태값 변경 -> react가 다시 렌더링 -> react-query가 queryKey 변경 감지 -> 검색 API 호출 -> 결과 받고 테이블 갱신 ]으로 변경되었다. 
  
  코드 흐름상으로 보았을 땐 어디가 문제인지 잘 모르겠다. 이 흐름 중 어디서 꼬였는지 살펴보고 문제를 해결해보자.

 

 

 

---

 

 

 

 

3. 문제 해결하기

• 수정 전 코드(react-query)

const [searchKeyword, setSearchKeyword] = useState("");

const { data: customers = [] } = useQuery({
  queryKey: ["customers", searchKeyword],
  queryFn: () => fetchCustomers(searchKeyword),
});

const handleSearch = (keyword) => {
  setSearchKeyword(keyword);
  setIsSearchOpen(false);

AI는 searchKeyword가 바뀌는 순간 react-query가 자동으로 다시 조회하는 방식으로, 구조상 틀린 건 아니지만 검색창 닫기/렌더링/테이블 갱신이 동시에 일어나면서 문제가 생길 수 있다고 했다.

 

const [searchKeyword, setSearchKeyword] = useState("");
const [submittedKeyword, setSubmittedKeyword] = useState("");

const {
  data: customers = [],
  isLoading,
  isFetching,
  isError,
  error,
  refetch,
} = useQuery({
  queryKey: ["customers", submittedKeyword],
  queryFn: () => fetchCustomers(submittedKeyword),
  enabled: canRead,
});

const handleSearch = (keyword) => {
  const trimmed = keyword.trim();

  if (!trimmed) {
    alert("검색어를 입력하세요.");
    return;
  }

  setSubmittedKeyword(trimmed);
  setIsSearchOpen(false);
  setPagination((prev) => ({ ...prev, pageIndex: 0 }));
};

그래서 위의 코드처럼 searchKeyword(검색창에 입력 중인 값)와 submittedkeyword(실제 API 조회에 사용하는 값)를 넣어 분리하는 방식으로 변경했다.  이러면 사용자가 입력할 때마다 쿼리가 흔들리지 않고 엔터를 눌렀을 때만 submittedKeyword를 바꿔서 react-query가 검색 API를 호출하게 만든다.

그런데,,, 이렇게 해도 여전히 문제가 발생했다. 거기다가 이 문제를 해결하기 위한 더 큰 문제가 있었는데, 왜 이런 현상이 생긴건지 AI도 모른다는 것이었다. 그니까 코덱스에게 현재 코드에 발생한 문제를 알려주고, 그 부분에 맞춰 실제로 어떤 문제가 있는지 물어보고, 수정하고 직접 돌려보도록 시켰는데 코덱스 쪽에서는 검색 기능이 문제없이 돌아간다는 말을 전해주었다.

나중엔 백엔드 문제인가 싶었지만, 이건 당연히 아니었다. 애초에 백엔드에 요청이 오는 것 같지도 않았다. 몇시간을 헤매다가 결국 튜닝의 끝은 순정이란... 말(?)처럼 검색 파트만 원래의 단순 코드로 바꾸기로 결정했다.

 

 

• 수정 후 코드
  

const handleSearch = async (keyword) => {
  const res = await authFetch(`/api/customers/search?keyword=${encodeURIComponent(keyword)}`);
  const data = await res.json();

  dispatch({ type: "INIT", payload: data });
  setIsSearchOpen(false);
  setPage(1);
};

아주 잘 아는 코드가 나왔다. 그리고 역시나 코드를 옮겨심자마자 작동이 아주 잘됐다.

이 코드는 맨 위에서 설명한 것처럼 [ 검색어 입력 -> 엔터 버튼 -> /api/customers/search 직접 호출 -> 응답 데이터를 테이블에 넣음 ] 순서로 진행되는 흐름이 아주 단순한 코드이다.

사실 왜 동작이 안된건지 무척 궁금하다. 검색 기능에 elasticsearch가 있어서 그렇지 그다지 복잡한 코드도 아니다. 그래서 당연하게 작동되지 않을거란 생각이 없었다. 솔직히 정확한 원인을 찾아내지 못해서 아쉽긴 하다. 그러나 이렇게라도 고칠 수 있었으니 다행이라고 생각하면서, 꼭 코드 수정 후엔 모든 테스트를 돌려보고 모든 기능을 검사하는 습관을 잊지 않기로 결심했다!!